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 blog.corsego.com 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)

Collapse
 
metaphysiker profile image
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!

Collapse
 
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

Collapse
 
joshrburks profile image
Josh Burks

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

Collapse
 
guitarlanguage profile image
Tom LaChance

Thank you very much for this advice.

Collapse
 
ameft profile image
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.

Collapse
 
ivanz profile image
Ivan Zabrodin

That's simple and awesome! Thanx a lot!

Collapse
 
jaemon profile image
Jonathan Owah

Thanks! Works perfectly.

Collapse
 
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.

Collapse
 
sasha370 profile image
Aleksandr Karyakin

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