15

如果我在文档的 head 标记中添加以下 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

在此处输入图像描述

我该如何解决这个问题？

4

4 回答 4

6

我认为问题不在于 Google 字体，而在于字体大小和垂直对齐的组合。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 的默认声明中确定这个替代声明的范围。

于 2012-12-30T15:18:16.587 回答
5

转到 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 对我有用，但它可能取决于哪个图标/您尝试使用它的方式。只是修补，直到它看起来不错。

于 2013-10-09T05:18:28.590 回答
4

这对我来说效果很好：

span.glyphicon {
    vertical-align: middle;
    margin-top: -5px;
}
于 2014-07-26T16:16:02.627 回答
1

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

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

只需使用 margin-top 直到它看起来正确。

祝你好运！

于 2012-12-29T15:30:26.053 回答