字体很棒的图标不是垂直居中的

Question

我正在使用最新的 font-awesome 库 (4.4)，似乎有些图标没有垂直居中或者它们的大小不同。

我在此处放大了 font-size: 14px; 列表：

我做错了什么吗？

Answer 1

.quick-actions i {
    font-size: 54px;
    cursor: pointer;
    color: #999;
    vertical-align: middle;
}
.fa:before {
    vertical-align: middle;
}
.quick-actions{
    border:1px solid #ccc;
    display: inline-block;
}

这似乎有效... http://jsfiddle.net/nh1sgw1a/

编辑（我发现这确实是 fa-commenting-o 的问题）：

.quick-actions i.fa-commenting-o:before{
    font-size:50px;
    /*margin-top:-5px;*/
    float:left;
}

http://jsfiddle.net/nh1sgw1a/2/

Answer 2

如评论中所述，它们并未以其形状的横轴中间居中绘制，这就是为什么它们看起来处于不同的高度。也就是说，我发现此 CSS 规则有助于将它们放置在更靠近我的 buttons/bars 的中间边缘（更垂直居中，但并不完美）：

i.fa {
  vertical-align: middle;
}

字体很棒的图标不是垂直居中的

Font-awesome icons are not vertically centered

css

fonts

font-awesome