Fontawesome + Importmaps + Rails 7

I love Fontawesome free icon library

I’ve been using it in most of my projects over the last 7 years.

Here’s how you can make it work in Rails 7 + importmaps.

So, you need to import fontawesome from npm. If you visit fontawesome npm homepage, you will see a command npm i @fortawesome/fontawesome-free.

For importmaps you can run:

# console
./bin/importmap pin @fortawesome/fontawesome-free

This will generate the following code:

# config/importmap.rb
++pin "@fortawesome/fontawesome-free", to: "https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.1.1/js/fontawesome.js"

Change the line:

# config/importmap.rb
--pin "@fortawesome/fontawesome-free", to: "https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.1.1/js/fontawesome.js"
++pin '@fortawesome/fontawesome-free', to: 'https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.1.1/js/all.js'

Include fontawesome in your js:

// app/javascript/application.js
import "@fortawesome/fontawesome-free"

Now you can use icons in your code:

# app/views/any_file.html.erb
<i class="fa-solid fa-flag"></i>
<i class="fa-brands fa-amazon"></i>
<i class="fa-regular fa-bell"></i>

That’s it!

Bonus: style fontawesome icons

It’s super easy to add size, animation, rotation:

# app/views/any_file.html.erb
<i class="fa-solid fa-refresh fa-2xl fa-spin"></i>
<i class="fa-solid fa-gem fa-rotate-180"></i>
<i class="fa-solid fa-gem fa-rotate-by" style="color: green; --fa-rotate-angle: 45deg"></i>
<i class="fa-brands fa-youtube" style="color: red;"></i>
<i class="fa-regular fa-bell fa-beat"></i>

Here is an alternative solution