Menu
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?
667
If you need to change the size of glyphicons, use the CSS font-size property. In this snippet, we'll show some examples and explain them. Let's start with an example, where we increase all the glyphicons and set their font-size to 50px.
Bootstrap provides set of graphic icons, symbols and fonts called Glyphicons. Some Glyphicons like Home icon, User icon, Lock icon, etc. Generally, Glyphicons are icon fonts which you can use in your web projects.
Bootstrap includes 260 glyphs from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, you should include a link back to Glyphicons whenever possible.
Glyphicons are basically little symbols, icons, or pictograms (whatever you prefer to call them) that you can use in a webpage. They're implemented in Bootstrap as an icon font — a custom font that contains these glyphs instead of letters. If you're creating a site based on Bootstrap 3.3.7,...
Bootstrap includes 260 glyphs from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, you should include a link back to Glyphicons whenever possible.
Specifying the Glyphicon web-font in a CSS rule with font-family; Using the Unicode HTML Entity to display the icon; Firstly, the CSS rule. This should be placed inside a <style> tag, or better yet, in a seperate stylesheet: span.icon { font-family: 'Glyphicons Halflings';} Next, the HTML Entity part:
Bootstrap Icons Free, high quality, open source icon library with over 1,500 icons. Include them anyway you like—SVGs, SVG sprite, or web fonts.
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.
66
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
