Can Font Awesome be used with importmaps in Rails 7?

I’m new to Rails 7’s importmap and the documentation says you can pin a JavaScript module and then import it:

./bin/importmap pin react react-dom
import React from "react"
import ReactDOM from "react-dom"

How would that work with Font Awesome? Font Awesome’s documentation says you should install the package:

npm install --save @fortawesome/fontawesome-free

but then, when it comes to using it, it says:

<script defer src="/your-path-to-fontawesome/js/brands.js"></script>
<script defer src="/your-path-to-fontawesome/js/solid.js"></script>
<script defer src="/your-path-to-fontawesome/js/fontawesome.js"></script>

I’m not entirely clear how to translate that to importmap. I tried:

<script defer src=""></script>
<script defer src=""></script>
<script defer src=""></script>

since the pinning resulted in:

pin "@fortawesome/fontawesome-free", to: ""

but that doesn’t work. It fails with this error in the console in the browser:

enter image description here

I tried this myself without success, ended up taking this route instead.

I just made it work but I’m not entirely sure why it works so I would appreciate any insight or improvements on this solution. In the meantime, I’m happy to share with the world:

First, you need to pin the Font Awesome Javascript packages by running:

./bin/importmap pin @fortawesome/fontawesome-free @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons

which adds:

pin "@fortawesome/fontawesome-free", to: ""
pin "@fortawesome/fontawesome-svg-core", to: ""
pin "@fortawesome/free-brands-svg-icons", to: ""
pin "@fortawesome/free-regular-svg-icons", to: ""
pin "@fortawesome/free-solid-svg-icons", to: ""

to your importmap.rb.

Then in your app/javascript/application.js you need to add:

import {far} from "@fortawesome/free-regular-svg-icons"
import {fas} from "@fortawesome/free-solid-svg-icons"
import {fab} from "@fortawesome/free-brands-svg-icons"
import {library} from "@fortawesome/fontawesome-svg-core"
import "@fortawesome/fontawesome-free"
library.add(far, fas, fab)

If you don’t need one of the libraries you can skip them, but skipping the last two imports or adding each icon package to the library makes it not work.


suggest you don’t to use importmap

Was having the same issue. I had to change the default pin to load ‘/js/all.js’ and everything worked:

# config/importmap.rb
pin '@fortawesome/fontawesome-free', to: ''

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

To load separately:

# config/importmap.rb
pin '@fontawesome', to: ''
pin '@fontawesome/brands', to: ''

# app/javascript/application.js
import "@fontawesome/brands"
import "@fontawesome"

Or with a script tag, add type=module (GitHub - WICG/import-maps: How to control the behavior of JavaScript imports):

<script type="module" src=""></script>
1 Like

In my experience, the icons show up with a slight delay, when I use the npm package.

When I put gem "font-awesome-sass", "~> 6.1.1" in my Gemfile (link to gem) and do bundle install, all icons loads fast. (And you don’t need to use SCSS, you can call the icons with the standard HTML tag.)