Rails: Font awesome icons not showing using font-awesome-rails gem

asset-pipeline, font-awesome, ruby-on-rails

Solution

I had this issue when working with Rails 6 and Bootstrap 4 in Ubuntu 20.04.

I had set up Fontawesome this way:

First I added Font Awesome to my `package.json` file:

yarn add @fortawesome/fontawesome-free

Next, I imported it into my `app/javascript/packs/application.js` file:

require("@fortawesome/fontawesome-free")

Next, I imported it into my `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';

I also added the Font Awesome 5 Rails gem to my Gemfile:

gem 'font_awesome5_rails'

and installed it in my project:

bundle install

And finally I modified where my fontawesome icons were called from this format:

<i class="fas fa-camera-retro"></i>

to this format

fa_icon('camera-retro')

But the issue was that the icons were displaying fine in development but not in production.

Here's how I fixed it:

The issue was that I needed to import the FontAwesome 5 fonts into the `app/assets/stylesheets/application.scss` file. So I imported this to it:

@import 'font_awesome5_webfont';

So my fontawesome import to the `app/assets/stylesheets/application.scss` file looked like this finally:

@import 'font_awesome5_webfont';
$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';

This time the icons displayed properly in development as well as production.

Note: Please ensure to re-compile your assets after making these changes and restart your server.

That's all.

I hope this helps

Problem

I can't seem to find an answer that works for me. The icon shows up as a box:  I'm using: ``` font-awesome-rails (4.6.2.0) rails (4.2.3) ``` I imported font-awesome-rails in my application.scss file using: ``` @import "font-awesome"; ``` and here is what I wrote for the view: ``` <i class="quote-left fa fa-quote-left"></i> ``` I've tried including it before and after bootstrap. I also tried manually adding the font folder to the pipeline in application.rb ``` config.assets.paths << Rails.root.join("app", "assets", "fonts") ``` Clearing the tmp folder didn't seem to do anything either. I spent way too much time on this, please help :(

Original source