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

Question

I'm trying to install FontAwesome via yarn by doing yarn add @fontawesome/fontawesome-free, and then adding it to my application.scss:

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

I have tried several things to write in the application.scss that I've seen through the internet, but none of them works, as I get the following error:

Sass::SyntaxError in Pages#index
Showing /Users/foo/dev/project/app/views/layouts/application.html.erb where line #9 raised:

File to import not found or unreadable: ~@fortawesome/fontawesome-free-webfonts/scss/fontawesome.
Load paths:
  /Users/foo/dev/project/app/assets/images
  /Users/foo/dev/project/app/assets/javascripts
  /Users/foo/dev/project/app/assets/stylesheets
  /Users/foo/dev/project/vendor/bundle/ruby/2.5.0/gems/coffee-rails-5.0.0/lib/assets/javascripts
  /Users/foo/dev/project/vendor/bundle/ruby/2.5.0/gems/actioncable-6.0.0.rc1/app/assets/javascripts
  /Users/foo/dev/project/vendor/bundle/ruby/2.5.0/gems/activestorage-6.0.0.rc1/app/assets/javascripts
  /Users/foo/dev/project/vendor/bundle/ruby/2.5.0/gems/actionview-6.0.0.rc1/lib/assets/compiled
  /Users/foo/dev/project/node_modules

Answer 1

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!

Answer 2

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';

Answer 3

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";

Answer 4

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" %>

Answer 5

I installed Font-awesome in a Rails 6 application that I was working on this way:

Firstly, install the free version of the font-awesome package in the application:

yarn add @fortawesome/fontawesome-free

Then, run the rails webpacker to install any other dependencies:

rails webpacker:install

Next, import font-awesome stylesheets to your app/assets/stylesheets/application.scss file:

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

Note: If you're wondering how the location of these files was gotten, check your the node_modules/@fortawesome/fontawesome-free directory in your application.

And then, require the Javascript file in your app/javascript/packs/application.js file:

require("@fortawesome/fontawesome-free");

Finally, ensure that your stylesheet and javascript header links in your app/views/layouts/application.html.erb file remain like this:

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

That's all.