How to Install FontAwesome with Yarn and Webpacker in Rails 6?

1. console:

yarn add @fortawesome/fontawesome-free

2. javascript/packs/application.js:

import "@fortawesome/fontawesome-free/css/all"

3. Check if it works:

Add couple of icons in any .html.erb (view) file:

<i class="far fa-address-book"></i>
<i class="fab fa-github"></i>

That’s it!😊

---

Relevant links:

• see all FontAwesome Icons here
• Yarn package

Comments

[Josh Burks]

In step 2, change css to js to get the icons working in production mode.

[Tom LaChance]

Thank you very much for this advice.

[Metaphysiker]

How did you find out what to import? How did you know that it was "@fortawesome/fontawesome-free/css/all"?

Is there like a strategy or guide? Sometimes, I want to add something with yarn but I don't know what to import.

Thanks!

[radin reth]

Once you install node packages using yarn or npm, it will download the package and store it directly inside node_modules directory in your current working directory.

so in this case, the package is stored in /node_modules/@fortawesome/fontawesome-free/css/all.[css|scss]

hope it help

[ameft]

Without webpacker, with Rails 7 and css/jsbundling-rails with esbuild, I had to put @import "@fortawesome/fontawesome-free/css/all"; inside assets/stylesheets/application.scss.

[Jonathan Owah]

Thanks! Works perfectly.

[Damian Nowak]

Interesting. I followed this, and some of my FA icons disappeared. For example, fa-globe still shows, but fa-wordpress doesn't.

[Ivan Zabrodin]

That's simple and awesome! Thanx a lot!

[Aleksandr Karyakin]

В очередной раз, спасибо большое )