字体图标未垂直居中

Question

我正在使用最新的font-awesome库（4.4），但似乎有些图标并没有垂直居中，或者它们的大小不同。 在线重现 我在这里对一个font-size: 14px;的列表进行了缩放：

我有做错的事情吗？

- Alvaro

---

为字体设置行高。 - Madalina Taina

不，它们不会......那就是字形的绘制方式。例如，有些字母像小写字母q一样有下降部分 - http://jsfiddle.net/6or8h5z0/1/ - Paulie_D

我遇到了同样的问题。字形容器是正方形的，高度取决于图标的宽度（就像@Paulie_D所说，有一些下降）。我找到的唯一方法是手动设置每个位置。 - Mehdi Brillaud

@Paulie_D 看来你是对的。 - Madalina Taina

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/

- Madalina Taina

---

它有所改善，但仍不完美。 “评论”图标似乎不适合。[小图标特别明显]（http://jsfiddle.net/nh1sgw1a/1/）。 - Alvaro

我知道，但是对于那个类添加其他属性... http://jsfiddle.net/nh1sgw1a/2/ .quick-actions i.fa-commenting-o:before{ font-size:50px; margin-top:-5px; float:left; } - Madalina Taina

我明白了。顺便说一下，line-height:50px;不是必要的。 - Alvaro

Answer 2

正如评论中所说，它们并没有在水平轴的中心点（形状的中心）绘制，这就是为什么它们看起来高低不一的原因。

话虽如此，我发现这个CSS规则很有用，可以将它们放置在按钮/条的中间边缘更接近中心（垂直居中，但不完美）：

i.fa {
  vertical-align: middle;
}

- chimos