Font awesome not loading icons - Rails 4

Question

I am using twitter bootstrap in my app and for that I am using ruby gem twitter-bootstrap-rails (2.2.8). I have upgraded the rails version to rails 4.

I am using following gems for assets

gem 'less-rails'
gem 'coffee-rails'
gem 'twitter-bootstrap-rails'
gem 'execjs'
gem 'therubyracer', :platforms => :ruby

Now the problem is that icon of font awesome is not loading. It should load the magnifier glass as per my HTML <button type="submit" class="btn"><i class="icon-search"></i></button>

enter image description here

Here is my bootstrap_and_overrides.css.less

@import "twitter/bootstrap/bootstrap";
@import "twitter/bootstrap/responsive";

// Set the correct sprite paths
@iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings");
@iconWhiteSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings-white");

// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
// Note: If you use asset_path() here, your compiled bootstrap_and_overrides.css will not
//       have the proper paths. So for now we use the absolute path.
@fontAwesomeEotPath: asset-path("fontawesome-webfont.eot");
@fontAwesomeEotPath_iefix: asset-path("fontawesome-webfont.eot#iefix");
@fontAwesomeWoffPath: asset-path("fontawesome-webfont.woff");
@fontAwesomeTtfPath: asset-path("fontawesome-webfont.ttf");
@fontAwesomeSvgPath: asset-path("fontawesome-webfont.svg");

// Font Awesome
@import "fontawesome/font-awesome";

// Glyphicons
//@import "twitter/bootstrap/sprites.less";

May be [this][1] question can help you. [1]: http://stackoverflow.com/questions/14473224/how-can-i-add-font-awesome-to-my-app-with-twitter-bootstrap — Emu, Jan 31 '14 at 19:25
What about this line? `Note: If you use asset_path() here, your compiled bootstrap_and_overrides.css will not have the proper paths. So for now we use the absolute path.` Do you need to use the absolute path? This sounds like a problem that could be solved via Firebug, check and see what is being loaded. — Petercopter, Jan 31 '14 at 21:25
I have looked in the firebug and have seen that all the assets are loading successfully. — Ishank Gupta, Feb 01 '14 at 16:13

score 9 · Accepted Answer · answered Apr 24 '14 at 18:19

9

Still not sure what the problem was, but I have included gem "font-awesome-rails" in my Gemfile and *= require font-awesome in my application.css, after that everything worked fine.

answered Apr 24 '14 at 18:19

Ishank Gupta

1,575
1
14
19

same here, @ishank Gupta solution worked on rails 4.20 with gem 'font-awesome-sass' already installed. – Galuga Apr 06 '15 at 18:16
`*= require font-awesome` is not valid to be included in a css file. What do you mean regarding this answer? – captainrad Jun 03 '15 at 23:52
3

@captainrad - It's an instruction to Rails' asset pipeline, and it goes in a comment block at the head of the `application.css` file – Ian Dickinson Jul 03 '15 at 13:52

score 0 · Answer 2 · answered Apr 29 '16 at 12:17

you can try this also:

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

Font awesome not loading icons - Rails 4

2 Answers2