使用Google字体时,Bootstrap图标(Glyphicons)略微向上,我该如何解决这个问题？

Question

如果我在文档的head标记中添加以下Google字体

<link href="http://fonts.googleapis.com/css?family=Muli|Dosis:500,400|Open+Sans" rel="stylesheet">

Bootstrap图标(Glyphicons)略微向上,您可以在此链接中看到:http://www.acarrilho.com/wp-content/uploads/2012/07/icon_off.png

我该如何解决这个问题？

Answer 1

我不认为问题是关于谷歌字体,而是字体大小和垂直对齐的组合.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;
}

在"仪表板"按钮中,字体大小似乎大于14像素,可能是22像素？一种解决方案可能是为您的按钮创建一个替代/扩展选择器并更改vertical-align为baseline:

[class^="icon-"] .my-class,
[class*=" icon-"] .my-class {
  vertical-align: baseline;
}

但请记住,视觉中心取决于单词; "仪表板"例如没有下降器(更多关于排版的解剖结构).如果baseline看起来不太好看其他一些,请参阅此处的说明.

来自@ user1751766的建议解决方案也是可能的.但我建议.my-class从Bootstrap的默认声明中确定这个替代声明的范围.

Answer 2

转到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;

混乱,top直到它按你喜欢的方式排列.11px对我有用,但它可能取决于你尝试使用它的图标/方式.只需修补一下,直到看起来不错.

Answer 3

我过去在 Bootstrap 中使用过这样的 CSS：

[class^="icon-"] {
margin-top: 3px;
}

只需调整边距顶部，直到看起来正确为止。

祝你好运！