Bootstrap icons (Glyphicons) are positioned slightly up when using Google Fonts, how can I solve that issue?

Question

If I add the following Google Fonts in the head tag of the document

<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

How can I solve this issue?

Answer 1

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.

[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-align to 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 baseline don't looks good try some of the others, see specification here.

The suggested solution from @user1751766 is also possible. But I suggest to .my-class to scope this alternative declaration from Bootstrap's default declaration.