css字体图标和文字不对齐

在前端开发中，我们常常会使用 CSS 字体图标来替代图片，以达到更好的性能和可维护性。然而，在使用 CSS 字体图标的过程中，可能会遇到文字和图标不对齐的问题。我们可以通过设置字体图标的垂直对齐方式来解决这个问题。下面以 Font Awesome 为例：首先，在 HTML 中引入 Font Awesome。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-5T9coTdQjzEl+PbFcIpVJ19u5AYuOu8/UvNeG70YfHf8GK25AIUW4nCAtT7oW6/0gst/5bqHm9AQ6ZJtPan0sg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

然后，在 CSS 中针对图标设置垂直对齐方式。

css字体图标和文字不对齐

.icon {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
  vertical-align: middle;
}

在这个例子中，我们将 Font Awesome 图标的垂直对齐方式设置为 middle，即和文字垂直居中对齐。同时，我们还设置了字体大小和字重，以及显式地将 line-height 设置为 1，以确保字体图标和文字的对齐。最后，在 HTML 中使用该图标。

<p>这是一个包含图标和文字的段落 <i class="fas fa-user icon"></i> User</p>

这样，在浏览器中就可以看到文字和图标垂直对齐的效果了。 PS：可能还需要考虑不同字体在垂直方向上的差异。对于这种情况，可以通过试验不同的垂直对齐方式来找到最适合的方式。

css字体图标和文字不对齐

相关文章