Font Awesome icons alignment

问题

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.

回答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:

Checkout a copy of the bootstrap-sass repo.
Locate the _bootstrap.scss file.
Replace the @import "bootstrap/sprites"; with @import "your/path/to/font-awesome";, where your/path/to/ contains the font-awesome.scss.
Recompile the bootstrap.scss (don't forget to minify!).

回答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

来源：https://stackoverflow.com/questions/12330032/font-awesome-icons-alignment

标签

css

ruby-on-rails

twitter-bootstrap

Sass

font-awesome