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.
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 30,013 icons in Font Awesome
5 Classic styles of every icon
4 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
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!
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
<svg> elements.
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 MutationObserver
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.
Setting the mutateApproach
configuration to 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
body.
How To
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 30,013 icons in Font Awesome
5 Classic styles of every icon
4 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
The best way is to configure it directly in the application.js file:
// This is a manifest file that'll be compiled into application.js,// which will include all the files listed below.//// Any JavaScript/Coffee file within this directory, lib/assets/javascripts,// or any plugin's vendor/assets/javascripts directory can be referenced here// using a relative path.////= require rails-ujs//= require activestorage//= require turbolinks//= require fontawesome/all//= require_tree .
FontAwesome.config.mutateApproach ='sync'
Using a Kit or your own external hosting
If you've installed Font Awesome by modifying your Rails layout, you may have
included a <script> tag.
Another common way to install Font Awesome is to place the source files in the
vendors/assets/javascripts directory and then modify the
app/assets/javascripts/application.js to include //= require fontawesome/all. Font Awesome will then get included in the application
bundle that your Rails layout already includes.
You can add a <script> tag in the layout to change the configuration.
Using Webpacker and @fortawesome/fontawesome-svg-core
You can subset icons using tree-shaking if you use Webpacker and NPM to install
Font Awesome.
Your installation may look like this, in which case we simply change the config
using the API.
import{ config, library, dom }from'@fortawesome/fontawesome-svg-core'
# Change the config to fix the flicker
config.mutateApproach ='sync'
# An example icon
import{
faGithub
}from'@fortawesome/free-brands-svg-icons'
library.add(
faGithub
)
dom.watch()