CSS 使用 Google Fonts 时，Bootstrap 图标（Glyphicons）的位置稍微向上，我该如何解决这个问题？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14082826/
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
Bootstrap icons (Glyphicons) are positioned slightly up when using Google Fonts, how can I solve that issue?
提问by Max
If I add the following Google Fonts in the head tag of the document
如果我在文档的 head 标签中添加以下 Google Fonts
<link href="http://fonts.googleapis.com/css?family=Muli|Dosis:500,400|Open+Sans" rel="stylesheet">
Bootstrap icons (Glyphicons) are positioned slightly up, as You can see at this link: http://www.acarrilho.com/wp-content/uploads/2012/07/icon_off.png
Bootstrap 图标（Glyphicons）的位置稍微向上，你可以在这个链接中看到：http: //www.acarrilho.com/wp-content/uploads/2012/07/icon_off.png
How can I solve this issue?
我该如何解决这个问题？
回答by Osserspe
I don't think the problem is about Google font but instead the combination of font-size and vertical-align. The default font-size of icon's in Bootstrap is 14px and in the declaration for icon-we have vertical-align: text-top;, see code below.
我认为问题不在于谷歌字体，而是字体大小和垂直对齐的组合。Bootstrap 中图标的默认字体大小为 14px，在icon-我们的声明中vertical-align: text-top;，请参阅下面的代码。
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
margin-top: 1px;
*margin-right: .3em;
line-height: 14px;
vertical-align: text-top;
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
}
In your "Dashboard" button it seems like the font-size is larger than 14px, maybe 22px? One solution may be to create an alternative/extension selector for your button and change vertical-alignto baseline:
在您的“仪表板”按钮中，字体大小似乎大于 14 像素，也许是 22 像素？一种解决方案可能是为您的按钮创建一个替代/扩展选择器并更改vertical-align为baseline：
[class^="icon-"] .my-class,
[class*=" icon-"] .my-class {
vertical-align: baseline;
}
But remember that the visual center depends on the word; "Dashboard" has for example no descenders (see more about the anatomy of typography). If baselinedon't looks good try some of the others, see specification here.
但请记住，视觉中心取决于单词；例如，“仪表板”没有下降器（请参阅有关排版解剖的更多信息）。如果baseline不好看，请尝试其他一些，请参阅此处的规范。
The suggested solution from @user1751766 is also possible. But I suggest to .my-classto scope this alternative declaration from Bootstrap's default declaration.
来自@user1751766 的建议解决方案也是可能的。但我建议将.my-class这个替代声明的范围从 Bootstrap 的默认声明中限定。
回答by Huntario
Go to Bootstrap.css
转到 Bootstrap.css
.glyphicon {
position: relative;
top: 11px;
display: inline-block;
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
Mess with topuntil it lines up the way you like. 11px worked for me on the heart, but it might depend on which icon / how you're trying to use it. Just tinker until it looks good.
弄乱top直到它按照你喜欢的方式排列。11px 对我有用，但这可能取决于哪个图标/您尝试使用它的方式。只是修补直到它看起来不错。
回答by Mati
This has worked well for me:
这对我来说效果很好：
span.glyphicon {
vertical-align: middle;
margin-top: -5px;
}
回答by David Taiaroa
I've used CSS like this with Bootstrap in the past:
我过去在 Bootstrap 中使用过这样的 CSS：
[class^="icon-"] {
margin-top: 3px;
}
Just play with the margin-top until it looks right.
只需使用 margin-top 直到它看起来正确。
Good luck!
祝你好运！
