DEV Community

loading...
Cover image for How to Install FontAwesome with Yarn and Webpacker in Rails 6?

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

Yaroslav Shmarov
I blog about RoR tips & tricks and create advanced RoR courses
Originally published at blog.corsego.com on ・1 min read

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:

Discussion (6)

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
joshrburks profile image
Josh Burks

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

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

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