Font Awesome icons alignment

Question

I am using bootstrap-sass and font-awesome-sass-rails gems and have successfully eradicated duplicate icons (from glyphicons) by adding to bootstrap-and-overrides.css.scss:

[class^="icon-"] {
  background-image:none;
}

However, now I am having the problem of slightly out of line icons.. The glyphicons were perfect before. Now I am seeing:

I would like to move the icons down a pixel or 2. Please help. Thanks.

Answer 1

Similar to the directions for LESS found on the Font-Awesome Integration section , one should remove the SASS for the glyph icons altogether, rather than just load the Font-Awesome SASS on top of it. I strongly discourage any approach that merely tries to save appearances by overriding CSS rules that don't need to be there in the first place.

I don't use Rails, but I assume the rough outline would be:

1. Checkout a copy of the bootstrap-sass repo .

2. Locate the _bootstrap.scss file.

3. Replace the @import "bootstrap/sprites"; with @import "your/path/to/font-awesome"; , where your/path/to/ contains the font-awesome.scss .

4. Recompile the bootstrap.scss (don't forget to minify!).

Answer 2

Im using the twitter-bootstrap-rails gem. I had to comment out:

  @iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings.png");

from bootstrap_and_overrides.css.less file