font_awesome_rails brings the fantastic Font Awesome iconic font to the Rails asset pipeline, with a bunch of new Sass styles for semantic markup.

Wouldn't be great if instead of

<a class="btn" href="..."><i class="icon-pencil"></i> Edit</a>

you could just write

<a class="edit btn" href="...">Edit</a>

so that down the line you can restyle your edit links with impunity (and save yourself some keystrokes while you're at it)?

Thanks to the mixins provided by font_awesome_rails, you can!

.edit.btn {
  @include icon(pencil);
}

Add this line to your application's Gemfile:

gem 'font_awesome_rails'

And then execute:

$ bundle

Finally, add this line to your application.css.scss:

@import 'font-awesome';

Note that you need to @import it with Sass and not *= require it with Sprockets.

For usage examples, see the project page.

If you've already integrated your app with Bootstrap and/or Font Awesome, you can get the classic .icon-* styles back by adding

@import 'font-awesome/classic';

to your application.css.scss.

If you're unlucky enough to need IE 7 compatibility, it's under font-awesome/ie7. Classic styles only (no mixins) so you can @import or *= require it as you see fit.