字体真棒图标不是垂直居中

我使用最新的字体真棒图书馆（4.4），它似乎有些图标不是垂直居中或他们有不同的大小。字体真棒图标不是垂直居中

Reproduction online

我做了一个变焦在font-size: 14px;列表在这里：

有什么我做错了吗？

来源

2015-09-07 Alvaro

集线高度的字体。 –

不，他们不会......这就是字形绘制的方式。有些人喜欢小写字母q - 例如http://jsfiddle.net/6or8h5z0/1/ –

我遇到了同样的问题。字形容器是平方的，高度取决于图标的宽度（也像@Paulie_D表示有一些下降）。我发现的唯一方法是手动设置每个位置。 –

.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-评论-O的问题）：

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

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

来源

2015-09-07 12:24:55

它改善了一点，但仍然不完美。 “评论”图标似乎不适合。 [相当明显的小图标]（http://jsfiddle.net/nh1sgw1a/1/）。 – Alvaro

我知道，但对于那个班级添加其他礼仪... http://jsfiddle.net/nh1sgw1a/2/ .quick-actions i.fa-commenting-o：之前{ font-size：50px; margin-top：-5px; float：left; } –

对，我明白了。顺便说一下，'line-height：50px;'是没有必要的。 – Alvaro

像在评论中说，他们没有画在中心的水平轴的形状，这就是为什么他们看起来像处于不同的高度。这么说，我发现将它们更接近我的按钮/条中间边缘有用这个CSS规则（更垂直居中，虽然不完美）：

i.fa { 
    vertical-align: middle; 
}

来源

2015-09-07 12:25:17 chimos

字体真棒图标不是垂直居中

回答

相关问题