Font Awesome is one of those staggeringly good open source projects that you don’t realize just how good it is until you use it – and then it goes away. The degree of polish and finish that an easy to use, inline icon adds to a project honestly just astounds me. That’s why, when I moved some code to production recently, and Font Awesome failed to render, well, I was beyond frustrated.
My current production platform is Rails 5.x and this is how I got past that particular hellish little bit of the Rails asset pipeline. The context is that I’ve been developing with Font Awesome for over 8 months now and I even spent the $$$ to back their KickStarter since Font Awesome is just that, well, awesome and I’ve been viewing their icons daily for 8 months – until I deployed at which point they vanished.
- Use the font-awesome-rails gem in Gemfile: gem “font-awesome-rails”.
- In your application.css.scss file you should have an import directive at or near the top like @import “font-awesome”;
In config/environments/production.rb, you need a series of asset compilation directives like these:
# Do not fallback to assets pipeline if a precompiled asset is missed. config.assets.compile = false # font_awesome additions config.serve_static_assets = true config.assets.compress = true config.assets.compile = true config.assets.digest = true
Before and After
Here’s the obligatory before and after screenshots:
The working screenshot has slightly different data in it since this was written over a series of days while this issue was researched.
I’ve now been using Rails since 2007 and Ruby since 2006 (and HTML since 93) which means that I so thoroughly precede the asset pipeline that it honestly makes me laugh. In all honesty, I really don’t understand the asset pipeline particularly well so if this advice is technically wrong, I apologize. What I can tell you is that this advice took a Rails 5 system where Font Awesome worked in development but failed in production and made it work in production – but when you don’t understand the low level details, well, it makes you uncomfortable.