我正在使用最新的font-awesome库(4.4),但似乎有些图标并没有垂直居中,或者它们的大小不同。
在线重现
我在这里对一个
font-size: 14px;
的列表进行了缩放:
我有做错的事情吗?
font-size: 14px;
的列表进行了缩放:
我有做错的事情吗?
.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;
}
.quick-actions i.fa-commenting-o:before{
font-size:50px;
/*margin-top:-5px;*/
float:left;
}
line-height:50px;
不是必要的。 - Alvaro正如评论中所说,它们并没有在水平轴的中心点(形状的中心)绘制,这就是为什么它们看起来高低不一的原因。
话虽如此,我发现这个CSS规则很有用,可以将它们放置在按钮/条的中间边缘更接近中心(垂直居中,但不完美):
i.fa {
vertical-align: middle;
}