stainless.blog

bug with icon vertical align when using font-awesome and bootstrap


André da Silva Carrilho

I tried using font-awesome, a set of icons to improve twitter bootstrap framework. It works beautifully almost every time, at least with the latest version of it (as of this writing).

For example, with the following code:

<h1 class="page-title">Map Headers</h1>  

The image looked like this:

icon_off

For some reason the icon was positioned slightly up compared to to the h1 text. I compared with the past version of font-awesome and found that for some reason a piece of code was no longer there. So I created a new *.css file with the following code:

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

This will correctly position the image with the h1 text.

As a side note, when adding font-awesome you should remove the glyphicons references from bootstrap .css files to avoid conflicts between the two.