字体真棒垂直对齐问题答案

【问题标题】：font-awesome vertical alignment issue字体真棒垂直对齐问题
【发布时间】：2015-07-06 20:40:08
【问题描述】：

我已经玩了一段时间的 font awesome 了，但有一个问题我无法解决。

我制作了这个简单的 JSfiddle 来显示对齐问题： http://jsfiddle.net/Laukess/fnssktu7/

<div class="wrapper">
    <i class="fa fa-heart-o"></i>    
    <i class="fa fa-comments-o"></i>
    <i class="fa fa-external-link"></i>
    <i class="fa fa-info-circle"></i>
</div>

.wrapper {
    width: 100px;
    height: 16px;
    border: 1px solid red;
}

i {
    vertical-align: top;
    height: 16px;
    width: 16px;
}

如您所见，图标没有垂直对齐。心形图标似乎在中间，但消息图标似乎在顶部有空白，下一个图标（外部链接）似乎在底部有空白。

我做错了什么？如果图标比它的宽度短，为什么图标设计者不平均分配空白？

我很困惑，用谷歌找不到任何东西，所以我想这只是我犯了一个初学者的错误，所以我希望你能帮助我。

【问题讨论】：

请记住，浏览器会将这些图标视为文本，因为 font-awesome 是一种字体。空格的变化就像“j”字符具有与“i”字符不同的空格一样。要单独操作它们的大小，应该使用 font-size 内联或使用 css 选择器 i.fa，而不是 height 或 width 选择器上的 i
我同意 @Brian 你的 CSS 代码应该 look more like this 注意我没有设置宽度和高度，而是设置字体大小和行高

标签： css font-awesome

【解决方案1】：

Working example.

正如你所说，这是图标设计者的错。您可以使用负/正边距修复它：

.fa-comments-o {
    margin-top: -1px;
}

.fa-external-link {
    margin-top: 1px;
}

【讨论】：

尽管我希望这不是答案，但似乎确实如此。感谢您的意见，我会将其标记为已接受。

【解决方案2】：

我去检查了实际的字体文件，其中几个字形以不同的高度为中心。你没有犯任何错误。你唯一能做的就是使用TechWisdom 在他的回答中建议的内容。更改 margin-top 属性以调整未按照您想要的方式垂直排列的字形高度。

【讨论】：