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?
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.
Go to 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 top until 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.
This has worked well for me:
span.glyphicon {
vertical-align: middle;
margin-top: -5px;
}
I've used CSS like this with Bootstrap in the past:
[class^="icon-"] {
margin-top: 3px;
}
Just play with the margin-top until it looks right.
Good luck!
