如何在不弄乱对齐的情况下减小 twitter-bootstrap 站点中 fontawesome 字形图标的大小?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/16678477/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I decrease the size of my fontawesome glyph icon in my twitter-bootstrap site without messing up the alignment?
提问by vt97john
On the following web page which is under construction, you will see a white box next to the company name at the top left here
在以下正在建设中的网页上,您将在此处左上角的公司名称旁边看到一个白框
This is a twitter-bootstrap based site and the white box "glyph icon" from FontAwesome. I cannot seem to reduce the size of the white box (maybe 25% or so would be desirable) without having the icon fall out of alignment with the company name. Could you please "view source" on the site and see if you are able to determine the right code change?
这是一个基于 twitter-bootstrap 的站点和来自 FontAwesome 的白框“字形图标”。我似乎无法在不使图标与公司名称不一致的情况下减小白框的大小(可能需要 25% 左右)。您能否在网站上“查看源代码”,看看您是否能够确定正确的代码更改?
回答by Ravimallya
Here is a solution for your problem. Add line-height: 28px;and change padding-topto 8px to the .navbar .brand class in custom.css file. And then add the following css
这是您的问题的解决方案。将custom.css 文件中的 .navbar .brand 类添加line-height: 28px;并更改padding-top为 8px。然后添加以下css
.navbar .brand .icon-sign-blank
{
font-size: 75%;
padding-bottom: 4px;
display: inline-table;
vertical-align: bottom;
}
in custom.css file. It will align the fontawesome icon to the baseline of the brand name. Hope it helps to fix the issue that you are facing.
在 custom.css 文件中。它会将 fontawesome 图标与品牌名称的基线对齐。希望它有助于解决您面临的问题。

