Rails: Installing font-awesome in Rails 6.0.0-rc1 with webpacker and yarn

As of November 2019 I have found this the easiest way to get it all working:

Install via Yarn:

yarn add @fortawesome/fontawesome-free

Import in your application.js file:

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

Pretty straightforward and worked for me!

You need to remove the ~ sign at the start of your imports and it should work fine.

It should be something like this:

$fa-font-path: '@fortawesome/fontawesome-free-webfonts/webfonts';
@import '@fortawesome/fontawesome-free-webfonts/scss/fontawesome';
@import '@fortawesome/fontawesome-free-webfonts/scss/fa-solid';

Asim's answer put me on the right track. However, it seems like some of the import paths have changed for the newer version (5.8.2) of FontAwesome. Here is what I needed to put inside of my application.scss file to make FontAwesome 5.8.2 available for use in my Rails 6.0.0-rc1 application:

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';

@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/solid";

Let Webpacker handle everything for you. Import the fontawesome.scss directly into your application.js file. Webpack will copy the font and reference it correctly.

$ yarn add --dev @fortawesome/fontawesome-free

// app/javascript/src/font-awesome.js
import '@fortawesome/fontawesome-free/scss/fontawesome.scss';
import '@fortawesome/fontawesome-free/scss/regular.scss';
import '@fortawesome/fontawesome-free/scss/solid.scss';

// app/javascript/packs/application.js
// Other imports left out for brevity
import '../src/font-awesome.js';

<!-- app/views/layouts/application.html.erb -->
<%= stylesheet_pack_tag "application" %>
<%= javascript_pack_tag "application" %>