DEV Community

Cover image for How to Install FontAwesome with Yarn and Webpacker in Rails 6?
Yaroslav Shmarov
Yaroslav Shmarov

Posted on • Originally published at on

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

1. console:

yarn add @fortawesome/fontawesome-free

Enter fullscreen mode Exit fullscreen mode

2. javascript/packs/application.js:

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

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

That’s it!😊

Relevant links:

Top comments (9)

metaphysiker profile image

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.


radinreth profile image
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

joshrburks profile image
Josh Burks

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

guitarlanguage profile image
Tom LaChance

Thank you very much for this advice.

ameft profile image

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.

ivanz profile image
Ivan Zabrodin

That's simple and awesome! Thanx a lot!

jaemon profile image
Jonathan Owah

Thanks! Works perfectly.

nowaker profile image
Damian Nowak

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

sasha370 profile image
Aleksandr Karyakin

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