Question

我已经玩了一段时间的字体真棒了，而且有一个问题我无法绕过我的脑袋。

我已经让这个简单的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;
}

如您所见，图标不会垂直对齐。心脏图标似乎位于中间，但消息图标似乎在顶部有空白区域，下一个图标（外部链接）似乎底部有空白区域。

我做错了什么？如果图标的宽度小于宽度，为什么图标设计师不会均匀地分配空白区域？

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

Answer 1

Working example

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

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

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

Answer 2

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

font-awesome垂直对齐问题

2 个答案: