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?
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)
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.
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>
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;
}
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";
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:
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.
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.
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
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;
}
