如果我在文档的标题中添加以下Google字体
<link href="http://fonts.googleapis.com/css?family=Muli|Dosis:500,400|Open+Sans" rel="stylesheet">
引导图标(Glyphicons)位于稍微上方,您可以在此链接中看到：http://www.acarrilho.com/wp-content/uploads/2012/07/icon_off.png
如何解决这个问题？
解决方法
我不认为问题是关于Google字体,而是font-size和vertical-align的组合. Bootstrap中图标的默认字体大小为14px,在图标的声明中我们有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;
}
在“仪表板”按钮中,字体大小似乎大于14px,也许是22px？一个解决方案可能是为您的按钮创建替代/扩展选择器,并将垂直对齐方式更改为基线：
[class^="icon-"] .my-class,[class*=" icon-"] .my-class {
vertical-align: baseline;
}
但请记住,视觉中心依赖于这个词; “仪表板”例如没有下降(见更多约the anatomy of typography).如果基线看起来不太好尝试其他一些,见specification here.
@ user1751766的建议解决方案也是可行的.但是我建议.my类从Bootstrap的默认声明中对这个替代声明进行定义.
