Font Awesome integrates well with Rails and Turbolinks, especially if you use Web Fonts. But if you're using SVG + JS, you'll need to make a few adjustments.
We’ll cover what to do when you encounter visual glitches caused by MutationObserver, and how to install Font Awesome, whether you use a Kit or Host Font Awesome yourself, and more!
What's the Challenge?
After you've installed the SVG with JS version of Font Awesome, and loaded your
first page in your Rails app, there are a couple of things that happen.
- Font Awesome will search for any
<i> elements and replace them with
- It will create a
MutationObserver that watches for changes in the page to
do future replacements.
When Turbolinks replaces the
<body> of your page with new content after
navigation occurs, Font Awesome automatically reconnects this
to the new content.
Here's where the problem is: there is a flash where icons are missing
before they quickly appear. This looks pretty nasty, but we can easily fix it.
sync (available in Version 5.8.0 or greater), provides a way to skip this
flash of missing icons by rendering them as soon as Turbolinks receives the new
We're going to start by assuming that you've already installed
Turbolinks(opens new window)
and configured it in your Rails app.
Using Your Application Configuration
The best way is to configure it directly in the
Using a Kit or your own external hosting
If you've installed Font Awesome by modifying your Rails layout, you may have
Using the asset pipeline
Another common way to install Font Awesome is to place the source files in the
//= require fontawesome/all. Font Awesome will then get included in the
bundle that your Rails layout already includes.
You can add a
<script> tag in the layout to change the configuration.
Using Webpacker and
You can subset icons using tree-shaking if you use Webpacker and NPM to install
Your installation may look like this, in which case we simply change the config
using the API.