字体很棒的图标不是垂直居中的
Font-awesome icons are not vertically centered
我正在使用最新的 font-awesome 库 (4.4),似乎有些图标没有垂直居中或者它们的大小不同。
我在此处放大了 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;
}
这似乎有效...
http://jsfiddle.net/nh1sgw1a/
编辑(我发现这确实是 fa-commenting-o 的问题):
.quick-actions i.fa-commenting-o:before{
font-size:50px;
/*margin-top:-5px;*/
float:left;
}
如评论中所述,它们并未以其形状的横轴中间居中绘制,这就是为什么它们看起来处于不同的高度。
也就是说,我发现此 CSS 规则有助于将它们放置在更靠近我的 buttons/bars 的中间边缘(更垂直居中,但并不完美):
i.fa {
vertical-align: middle;
}
我正在使用最新的 font-awesome 库 (4.4),似乎有些图标没有垂直居中或者它们的大小不同。
我在此处放大了 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;
}
这似乎有效... http://jsfiddle.net/nh1sgw1a/
编辑(我发现这确实是 fa-commenting-o 的问题):
.quick-actions i.fa-commenting-o:before{
font-size:50px;
/*margin-top:-5px;*/
float:left;
}
如评论中所述,它们并未以其形状的横轴中间居中绘制,这就是为什么它们看起来处于不同的高度。 也就是说,我发现此 CSS 规则有助于将它们放置在更靠近我的 buttons/bars 的中间边缘(更垂直居中,但并不完美):
i.fa {
vertical-align: middle;
}