Adding Font Awesome to your project manually instead of via a gem

Aug 06, 2013

ruby rails tutorial

Font Awesome is truly a work of art. Those guys should be charging for this product, but I am grateful that they are not.

Today was the day that I finally got fed up using the font-awesome-rails gem. On Rails 3 it was excellent and it was just a bundle install away, but with Rails 4 it just stopped working. Others have had issues with it and their response was that it was a sass-rails problem, and not theirs. Every time I used their gem with a Rails 4 project I would manually patch their gem to make it a proper SCSS file font-awesome.css.scss instead of using the old style font-awesome.css.erb that they use. However, whenever they release a new version of their gem mine stopped working until I patched it again.

So today I decided that I should stop relying on other people's magic and just manually add (and take care of) my own external dependency on Font Awesome. Here are the steps I took:

1. Remove the dependency from Gemfile.
2. Run bundle to update the Gemfile.lock file.
3. Download Font Awesome from here.
4. Unzip the archive.
5. Copy the font-awesome directory to your vendor/assets/stylesheets directory.
6. Add the following line to your application.css:

If you are using Bootstrap 2.x or older, you will need to stop it from trying to load its Glyphicons over top of the Font Awesome icons. I ripped this CSS from the font-awesome-rails project.

I suggest putting this CSS into a separate SCSS file (mine is labeled bootstrap_font_awesome_fix.css.scss) and having the asset-pipeline load it after the Font Awesome files are loaded. Here is what my application.css file looks like now:

Once you restart your Rails server the asset pipeline will pick up the library in the vendor directory and everything should start working. Time will tell whether I will run into issues with this manual way of installing font awesome, but for now it's nice knowing that there is once less piece of magic in my application.