Rails: Using Font Awesome

Question

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?

Can you post some code and/or link to a location where the problem exists? — djangodude, Jun 15 '12 at 14:23

score 125 · Accepted Answer · edited Aug 15 '13 at 03:29

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)

worked for me as well with one caveat, i had to NOT use both SASS and ERB on the same file. I'm not sure Rails can dual pre-process a file like this. But it doesn't need to be run through SASS anyways, so just doing `font-awesome.css.erb` worked for me. Thanks! — ipd, Dec 20 '12 at 00:10
Using Rails 3.2.11, this works fine as expected. Great answer! — sergserg, Jan 23 '13 at 02:25
Notice that the second line of `src` is actually very long. You need to change each of them and don't split them into multiple `src` lines. Actually another answer using `font_url` with `scss` also works and is more concise. — lnyng, Oct 02 '17 at 02:40

score 50 · Answer 2 · answered Jul 23 '13 at 09:09

50

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.

answered Jul 23 '13 at 09:09

nathanvda

49,707
13
117
139

2

what about font-awesome-sass http://fortawesome.github.io/Font-Awesome/get-started/ – msanjay May 12 '14 at 14:24
I am trying to do it this way, but isn't generating any files under me stylesheet assets – Suraj Jun 18 '15 at 09:49
Nope, the asset files are inside the gem. – nathanvda Jun 18 '15 at 10:38
2

but the icons are not loading after doing what's been suggested above, and when I am trying to use the CDN for font-awesome, while pushing the code to heroku I am getting another error remote: Sass::SyntaxError: Undefined variable: "$fa-css-prefix". – Suraj Jun 18 '15 at 10:46
You should ask this in a different question. This is too specific and too little information to help. – nathanvda Jun 18 '15 at 13:22
I'm using Rails 4 and I'm getting the error `couldn't find file 'font-awesome'` . – chipit24 Sep 05 '15 at 00:34
You did run `bundle install`? – nathanvda Sep 05 '15 at 09:10
You may need to use the import @ syntax with that gem and sass - not the 'require' syntax. But either way, the fonts may show up as empty squares in production, even if the fonts are loaded per page-inspector. – JosephK Sep 09 '17 at 06:15
this works well but only for free icons, if you have a pro license you cannot benefit of the pro icons with this gem – damoiser Nov 22 '20 at 21:34

Guillermo Siliceo Trueba · Answer 3 · 2019-01-03T22:35:11.710

21

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>

edited Jan 03 '19 at 22:35

answered Mar 23 '14 at 01:10

Guillermo Siliceo Trueba

4,251
5
34
47

Thank You!! THAT worked, after hours fighting with the "font-awesome-sass" gem to no avail on production. BTW, I left the gem installed and no side-effects that I can see; not sure if the gem is doing anything, but enough time wasted on what should "just work". – JosephK Sep 09 '17 at 06:21
1

Its probably doing nothing, you want to clean it up, less gems is always a good thing for any rails project. – Guillermo Siliceo Trueba Sep 13 '17 at 22:18

score 14 · Answer 4 · answered Mar 10 '15 at 16:09

14

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

answered Mar 10 '15 at 16:09

EdC

1,145
10
8

just realized why the awesome font gem didn't work, I removed the applications.css reference from my application page. Now that I replugged it in, it started working. so going to go w that solution, as it appears to be cleaner – killerbarney Jan 08 '16 at 02:16
Finally. Only took me an hour this time. Would be great if I could install `font-awesome-rails` and be done. Nope. – Damien Roche Jan 18 '19 at 10:42

score 5 · Answer 5 · answered Dec 10 '16 at 12:38

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

score 4 · Answer 6 · answered Jun 14 '20 at 15:32

4

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!

answered Jun 14 '20 at 15:32

Pedro Paiva

721
11
17

for me the problem was that webpacker compiled js assets(public/packs) didn't have the fontawesome included and couldn't be referenced from rails compiled assets (public/assets) because the app is sitting in a subdirectory and i'm using config.relative_url_root (domain.com/subdir) so this solved the problem in production and development. thanks! – Azeer Esmail Feb 28 '22 at 02:36

score 3 · Answer 7 · answered Sep 24 '18 at 03:30

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.

Vova Rozhkov · Answer 8 · 2019-09-23T07:34:19.387

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.

score 1 · Answer 9 · edited Feb 18 '16 at 00:32

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

score 0 · Answer 10 · edited Mar 04 '14 at 22:30

For rails 3.2.* a quick solution:

1) Put the font awesome files in a "fonts" folder in the public folder 2) 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;
}

Rails: Using Font Awesome

10 Answers10

Linked

Related