Font Awesome integrates well with the tool most often paired with Rails, to enable faster page performance by swapping out the
<body> and merging the
<head> of an HTML page
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 fix it easily.
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 our CDN 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.
But maybe the best way is to configure it directly in the
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.