How to Install FontAwesome with Yarn and Webpacker in Rails 6?
#fontawesome#ruby#rails
Yaroslav Shmarov

Yaroslav Shmarov @superails

About: I write about different Ruby on Rails topics. Check it out!

Location:
Chernihiv, Ukraine
Joined:
Nov 4, 2017

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

Publish Date: Dec 10 '20
24 9

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:

Comments 9 total

  • Jonathan Owah
    Jonathan OwahDec 19, 2020

    Thanks! Works perfectly.

  • Aleksandr Karyakin
    Aleksandr KaryakinJan 31, 2021

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

  • Josh Burks
    Josh BurksMar 11, 2021

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

    • Tom LaChance
      Tom LaChanceNov 22, 2021

      Thank you very much for this advice.

  • Metaphysiker
    MetaphysikerMay 13, 2021

    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
      radin rethNov 20, 2021

      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

  • Damian Nowak
    Damian NowakAug 26, 2021

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

  • Ivan Zabrodin
    Ivan ZabrodinSep 6, 2021

    That's simple and awesome! Thanx a lot!

  • ameft
    ameftJul 13, 2023

    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.

Add comment