css - Font Awesome 垂直对齐问题

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;
}

如您所见，图标没有垂直对齐。心形图标似乎在中间，但消息图标顶部似乎有空白，下一个图标 (external-link) 底部似乎有空白。

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

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

Answer 1

Working example .

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

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

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