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

Question

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 :(

Answer 1

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

Answer 2

I moved my import of font-awesome below my font import and it solved it.

from this:

@import "font-awesome"; 
@import url("https://fonts.googleapis.com/css?family=Playfair+Display:700,900");

to this:

@import url("https://fonts.googleapis.com/css?family=Playfair+Display:700,900");
@import "font-awesome";