How to install font-awesome with yarn in Rails 6.0

Integrating Font awesome 5 in Rails 6.0 via Yarn

Rails 6.0 uses webpack as their default javascript compile engine making our life easier while integrating all the yarn modules we couldn’t have in earlier versions of Rails application.

So excited enough, I installed Bootstrap 4.x and Toastr for my UI and then I got stuck at font-awesome which really didn’t work looking at just one tutorial.

Well, but good news!

At last, it did worked for me after compiling some tutorials.

Here’s how:

Let’s first install font awesome via yarn

$ yarn add @fortawesome/fontawesome-free

Import font-awesome stylesheets and javascripts into your application.

// application.scss
$fa-font-path: '@fortawesome/fontawesome-free/webfonts';
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import '@fortawesome/fontawesome-free/scss/solid';
@import '@fortawesome/fontawesome-free/scss/regular';
@import '@fortawesome/fontawesome-free/scss/brands';
@import '@fortawesome/fontawesome-free/scss/v4-shims';

And,

// application.js
import "@fortawesome/fontawesome-free/js/all";

Now, you can use font-awesome icons simply by

<i class="fab fa-twitter fa-2x"></i>

There’s no need to install font-awesome gem in your Rails application by now.

Voila!