Rails: Using Font Awesome

Ruby on-Rails Problem Overview

My web designer has provided me with updated fonts/icons that have been added to font awesome - he placed this in a local fonts folder. I was also given a font-awesome.css file.

I copied the fonts folder into my assets directly and put font-awesome.css in assets/stylesheets.

The css is referenced correctly in my code, but none of the icons from the font folder get loaded.

Is there something I need to do to ensure everything gets loaded correctly and/or that the fonts folder is referenced?

Ruby on-Rails Solutions

Solution 1 - Ruby on-Rails

first: add app/assets/fonts to the asset path (config/application.rb)

config.assets.paths << Rails.root.join("app", "assets", "fonts")

then move the font files into /assets/fonts (create the folder first)

Now rename the font-awesome.css to font-awesome.css.scss.erb and edit it like this: change:

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome')    format('svg');
  font-weight: normal;
  font-style: normal;
}

to this:

@font-face {
  font-family: "FontAwesome";
  src: url('<%= asset_path("fontawesome-webfont.eot") %>');
  src: url('<%= asset_path("fontawesome-webfont.eot") + "?#iefix" %>') format('eot'), url('<%= asset_path("fontawesome-webfont.woff") %>') format('woff'), url('<%= asset_path("fontawesome-webfont.ttf") %>') format('truetype'), url('<%= asset_path("fontawesome-webfont.svg") + "#FontAwesome" %>') format('svg');
  font-weight: normal;
  font-style: normal;
}

Finally: check all resources are loaded correctly (with Firebug or Chrome Inspector)

Solution 2 - Ruby on-Rails

There is now an easier way, just add gem "font-awesome-rails" to your Gemfile and run bundle install.

Then in your application.css, include the css file:

/*
 *= require font-awesome
 */

It includes the font-awesome into your asset pipeline automatically. Done. Start using it :)

For more information, check the font-awesome-rails documentation.

Solution 3 - Ruby on-Rails

I offer another answer, in this one you won't have to worry about gems or paths or any of those overkill solutions. Just paste this line in your application.html.erb (or whatever file your layout is)

<head>
...
<link href="//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

Solution 4 - Ruby on-Rails

In addition to Vicoar's answer

For Rails 4 you have to change the CSS slightly differently. Note the usage of font_url:

@font-face {
  font-family: "FontAwesome";
  src: font_url('fontawesome-webfont.eot');
  src: font_url('fontawesome-webfont.eot?#iefix') format('eot'), font_url('fontawesome-webfont.woff') format('woff'), font_url('fontawesome-webfont.ttf') format('truetype'), font_url('fontawesome-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

Solution 5 - Ruby on-Rails

Now, Following way is the easiest way to integrate Font Awesome with Rails:

SASS Ruby Gem

Use the Official Font Awesome SASS Ruby Gem to easily get Font Awesome SASS into a Rails project.

Add this line to your application's Gemfile:

gem 'font-awesome-sass'

And then execute:

$ bundle

Add this to your Application.scss:

@import "font-awesome-sprockets";
@import "font-awesome";

Solution 6 - Ruby on-Rails

How to use font-awesome 4 with barebones Rails 6 and Webpacker, without any additional gems, copy-pasting font or css files into your app and doing other weird things:

Add font-awesome npm package — package.json:

{
  "dependencies": {
    "font-awesome": "4.7.0"
  }
}

Include font-awesome css file into css manifest — app/stylesheets/application.css:

/*
 *= require font-awesome/css/font-awesome.min
 *= require_tree .
 *= require_self
 */

Override font-face definition in our custom css file — app/stylesheets/font-awesome.css.erb:

@font-face {
  font-family: 'FontAwesome';
  src: url('<%= font_path('fontawesome-webfont.eot') %>');
  src: url('<%= font_path('fontawesome-webfont.eot') %>?#iefix') format('embedded-opentype'), url('<%= font_path('fontawesome-webfont.woff2') %>') format('woff2'), url('<%= font_path('fontawesome-webfont.woff') %>') format('woff'), url('<%= font_path('fontawesome-webfont.ttf') %>') format('truetype'), url('<%= font_path('fontawesome-webfont.svg') %>#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Include node_modules font-awesome dir + font file types into assets pipeline— config/initializers/assets.rb

Rails.application.config.assets.paths << Rails.root.join('node_modules/font-awesome/fonts')
Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/

You'll get fonts included and compiled into public/fonts directory and you'll get single css file with all stuff (your app and font-awesome) compiled into it.

The thing is, font-awesome minified css contains hardcoded paths to fonts and to override this we just adding font-face directive with generated fonts paths. Because of this, the font-awesome.min.css should be added first in the manifest file.

However, while everything will work fine, you'll get 404 errors in console. I wasn't managed to fix this and eventually gave up and switched to font-awesome-sass gem.

Solution 7 - Ruby on-Rails

For Rails 6 + Webpacker.

You can install using Yarn: yarn add @fortawesome/fontawesome-free

And then in app/javascript/packs/application.js you will need to add this line:

require("@fortawesome/fontawesome-free/js/all")

It worked for me! I hope that can help others!

Solution 8 - Ruby on-Rails

Having just gone through this with Rails 5.2, I'd like to share how this works if you don't want to use the font-awesome-rails gem:

Put the FontAwesome font files (EOT, WOFF, etc.) in a suitably named subfolder of /app/assets, /vendor/assets or /lib/assets, eg: /app/assets/fonts.
Add this line to config/initializers/assets.rb:

Rails.application.config.assets.paths << Rails.root.join("app", "assets", "fonts")
Rename FontAwesome's all.css to all.scss. If you don't do this, Rails won't pre-process the path references in the next step.
Replace all the paths to the font files with Rails pipeline references (ie. font-url or asset-url):

eg. before

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

eg. after

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

Solution 9 - Ruby on-Rails

I have tried vicoar's , but it doesn't work on my project based on ruby 1.9.3 and rails 3.2. Then I rename the file name font-awesome.css to font-awesome.css.erb and change the @font-face to this:

@font-face {
  font-family: "FontAwesome";
  src: url(<%= asset_path 'fontawesome-webfont.eot' %>);
  src: url(<%= asset_path 'fontawesome-webfont.eot' + '?#iefix' %>) format('eot'), url(<%= asset_path 'fontawesome-webfont.woff' %>) format('woff'), url(<%= asset_path 'fontawesome-webfont.ttf' %>) format('truetype'), url(<%= asset_path 'fontawesome-webfont.svg' + '#FontAwesome' %>) format('svg');
  font-weight: normal;
  font-style: normal;
}

It works very well and the code is very simple...(your can refer the guide asset_pipeline

Solution 10 - Ruby on-Rails

For rails 3.2.* a quick solution:

Put the font awesome files in a "fonts" folder in the public folder
Open font-awesome.css and change the 4 entries for "../fonts" to "/fonts" at the top of the file

@font-face
{
     font-family:'FontAwesome';
     src:url('/fonts/fontawesome-webfont.eot?v=3.2.1');
     src:url('/fonts/fontawesome-webfont.eot?#iefix&v=3.2.1') 
     format('embedded-opentype'),url('/fonts/fontawesome-webfont.woff?v=3.2.1') 
     format('woff'),url('/fonts/fontawesome-webfont.ttf?v=3.2.1') 
     format('truetype'),url('../fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') 
     format('svg');
     font-weight:normal;
     font-style:normal;
}
[class^="icon-"],[class*=" icon-"]
{
     font-family:FontAwesome;
     font-weight:normal;
     font-style:normal;
     text-decoration:inherit;
     -webkit-font-smoothing:antialiased;
     *margin-right:.3em;
}

Content Type	Original Author	Original Content on Stackoverflow
Question	user464180	View Question on Stackoverflow
Solution 1 - Ruby on-Rails	VMOrtega	View Answer on Stackoverflow
Solution 2 - Ruby on-Rails	nathanvda	View Answer on Stackoverflow
Solution 3 - Ruby on-Rails	Guillermo Siliceo Trueba	View Answer on Stackoverflow
Solution 4 - Ruby on-Rails	EdC	View Answer on Stackoverflow
Solution 5 - Ruby on-Rails	AR Rose	View Answer on Stackoverflow
Solution 6 - Ruby on-Rails	Vladimir Rozhkov	View Answer on Stackoverflow
Solution 7 - Ruby on-Rails	Pedro Paiva	View Answer on Stackoverflow
Solution 8 - Ruby on-Rails	MSC	View Answer on Stackoverflow
Solution 9 - Ruby on-Rails	Tony Han	View Answer on Stackoverflow
Solution 10 - Ruby on-Rails	Tom	View Answer on Stackoverflow