字体真棒垂直对齐问题

Question

我已经研究 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;
}

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

我做错了什么？如果图标短于其宽度，为什么图标设计者不均匀分布白色 space？

我很困惑，使用google找不到任何东西，所以我想这只是我犯了一个新手错误，所以我希望你能帮助我。

Answer 1

Working example.

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

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

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

Answer 2

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

字体真棒垂直对齐问题

font-awesome vertical alignment issue

css

font-awesome