为什么Font-awesome图标没有正确垂直居中？

Question

请检查这个小提琴：

CSS：

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

HTML：

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

并在资源中包含font-awesome：

https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css

直接链接：https://jsfiddle.net/xsok4r9n/

如果你仔细观察，你会看到减号图标没有正确垂直居中......这个问题出现在大多数字体真棒图标上（甚至还有我试过的其他一些套装）。

为什么会这样？我能做些什么来避免它吗？

由于

Answer 1

问题是FontAwesome字体本身不是垂直居中的。您可能希望通过边距或填充来补偿这一点。

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

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