Rails: Using Font Awesome

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?

Solution 1:

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:

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:

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:

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

Rails: Using Font Awesome

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Related

Recent Posts