为什么字体真棒图标没有正确垂直居中？答案

【问题标题】：Why Font-awesome icons are not correctly vertically centered?为什么字体真棒图标没有正确垂直居中？
【发布时间】：2023-04-03 14:30:01
【问题描述】：

请检查这个小提琴：

CSS：

div {
    background-color:lightgray;
    height: 50px;
    line-height: 50px;
    font-size: 19px;
}

HTML：

<div>
    <i class="fa fa-minus"></i>
</div>

并在资源中包含 font-awesome：

如果你仔细看，你会发现减号图标没有正确垂直居中...这个问题出现在大多数字体很棒的图标（甚至我尝试过的其他一些字体集）。

为什么会这样？有什么办法可以避免吗？

谢谢

【问题讨论】：

【解决方案1】：

问题是 FontAwesome 字体本身没有垂直居中。您可能需要使用边距或内边距来弥补这一点。

这是一个极端的例子； https://jsfiddle.net/epq5gqwa/

div {
   background-color: yellow;
    font-size: 400px;
}
i { 
   background-color:lightgray;
}

【讨论】：