Rails 5 + Rails Assets + Fontawesome does not load fonts

Question

On installing Fontawesome via rails-asset.org, and following the default instructions, the fonts don't load correctly and all I see is boxes, indicating, the url's being generated to load the font are incorrect.

Answer 1

UPDATE : Save yourselves some time and switch gems. Here are the steps. I found that even with my previous answer there are path issues in production. However its easiest to get fontawesome working with:

1. gem 'font-awesome-rails'
2. @import "font-awesome"; in your scss file
3. Done!

Ignore everything below this! unless you absolutely want to use gem 'rails-assets-fontawesome'

So looks like this is a bug in the library and the asset pipeline does not find the path. The fix suggested in the issue does not work any more because the path seems to have changed since and there is no hyphen in font-awesome path anymore.

Here's the correct fix:

1. Create a new file app/assets/stylesheets/font-awesome.scss with content:

fa-font-path: "fontawesome/fonts";
@import "fontawesome";

2. In application.scss include:

   *= font-awesome

This should fix the problem and icons should start showing up.

Remarks:

If you choose to move the font-awesome.scss inside some directory under app/assets/stylesheets/somedir/font-awesome.scss, then you need to fix the fa-font-path variable to have correct relative path like so:

fa-font-path: "../fontawesome/fonts";

Be careful with paths and names!

1. The file you create cannot be called fontawesome.scss as this is the name used by the packaged gem.

2. If you have newest version of the gem rails-assets-fontawesome (4.7.0) then the import and fa-font-path will use fontawesome and not font-awesome as in older versions of this gem. Not sure how far back in versions this behavior goes.

Answer 2

For 5.5.0 version it should be look like this:

$fa-font-path: 'fontawesome/web-fonts-with-css/webfonts';

@import "fontawesome";

// Copy-paste of these files:
// @import "fontawesome/solid";
// @import "fontawesome/regular";
// But url() replaced with font-url() 

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  src: font-url('#{$fa-font-path}/fa-regular-400.eot');
  src: font-url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
  font-url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
  font-url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
  font-url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
  font-url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
}

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: font-url('#{$fa-font-path}/fa-solid-900.eot');
  src: font-url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
  font-url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
  font-url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
  font-url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
  font-url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
}

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

Answer 3

if fontawsome 4.*...

Copy fonts from fontawsome/fonts for rails public folder: public/fonts

Answer 4

Can't comment above, but shouldn't it be:

$fa-font-path: "fontawesome/fonts";

You can right above the suggested import by the gem:

@import "fontawesome";

Answer 5

After about a day and a half of learning ALL about the asset pipeline, its cache and other fun topics, here's how I finally got this to work...

• Rails 5.2.1
• Font Awesome 6 Pro (loaded via npm using .npmrc with license key)
• Using SCSS
• Also using font-awesome-rails (but only for the helpers - notice there is no @import "font-awesome"; below)

# config/initializers/assets.rb

# Adde node_modules/ to the asset pipeline
Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'node_modules')

# Pre-compile any font files located in the asset pipeline
# This tells Rails to precompile the font files, fingerprint them, and place them in /public/assets/ (in the same subdir where they live in the pipeline)
# e.g. 
# node_modules/@fortawesome/fontawesome-pro/webfonts/fa-solid-900.ttf (pipeline path)
# public/assets/@fortawesome/fontawesome-pro/webfonts/fa-solid-900-229b67ef16372975f562838a5c9f9bd2d9d9905ccc9c77f34c45f3d1f18f016f.ttf (pre-compiled asset path)

Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|woff2|ttf)$/

# application.scss

@import "@fortawesome/fontawesome-pro/scss/fontawesome.scss";
// Don't use provided font imports b/c we need to use font-url to get asset paths with fingerprints!
// $fa-font-path: "../webfonts"; // Don't use this
// @import "@fortawesome/fontawesome-pro/scss/regular.scss"; // Don't use this
@import "fonts"; // Use this instead so that we can use font-url

# fonts.scss 

/* Font Awesome 6 */

@font-face {
  font-family: 'Font Awesome 6 Pro';
  font-style: normal;
  font-weight: 900;
  src: font-url("@fortawesome/fontawesome-pro/webfonts/fa-solid-900.woff2") format("woff2"),
  font-url("@fortawesome/fontawesome-pro/webfonts/fa-solid-900.ttf") format("truetype"); }


@font-face {
  font-family: 'Font Awesome 6 Pro';
  font-style: normal;
  font-weight: 400;
  src: font-url("@fortawesome/fontawesome-pro/webfonts/fa-regular-400.woff2") format("woff2"),
  font-url("@fortawesome/fontawesome-pro/webfonts/fa-regular-400.ttf") format("truetype"); }

@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-style: normal;
  font-weight: normal;
  src: font-url("@fortawesome/fontawesome-pro/webfonts/fa-brands-400.woff2") format("woff2"),
  font-url("@fortawesome/fontawesome-pro/webfonts/fa-brands-400.ttf") format("truetype"); }

Also, one of the hardest things about this was realizing that my production environment wasn't working the same as my dev environment so I only realized the issue after deploying :( Here's how to avoid that...

# config/environments/development.rb

# Don't use pipeline if asset path fails 
# config.assets.compile defaults to true in dev...so if the pre-compiled asset doesn't exist in public/assets/..., it will just pull from the pipeline and you won't know that you have an issue until you deploy!
config.assets.compile = false # This will raise an exception if the pre-compiled asset not found!
config.assets.debug = false # Pre-compile assets into single file
config.assets.digest = true # Use fingerprinting

Now, of course, this means you need to pre-compile your assets in development, so you need to run bundle exec rake assets:precompile from the root directory of your project. This will pre-compile your assets and place them in /public/assets/

If you run into a cache issue where the pre-compiler doesn't actually re-compile a resource, you can delete the Sprockets cache by running rm -r tmp/cache/assets

Once you have successfully migrated your asset changes to production, I would recommend reverting development.rb back to the defaults for efficient development. Also, you may want to bundle exec rake assets:clobber to delete the pre-compiled assets.

Here's some other good info I found after the fact... https://guides.rubyonrails.org/asset_pipeline.html#in-development

Hope this helps someone save several hours of "rabbit-holing" :)

Answer 6

I have it worked with adding these lines to config/initializers/assets.rb:

Rails.application.config.assets.paths << Rails.root.join('node_modules')

# font-awesome fonts
Rails.application.config.assets.precompile << %r{font-awesome/fonts/[\w-]+\.(?:eot|svg|ttf|woff2?)$}

and having this as mentioned in other answers:

application.scss

$fa-font-path: "fontawesome/fonts";
@import "fontawesome";

Run rake assets:precompile and you should see font files in public/assets/font-awesome/fonts