FontAwesome icons not shown in Rails when deployed to Heroku

Question

I have tried the solutions in many other related StackOverflow questions, but my deployed app still shows a white rectangular box, instead of the icons. On localhost it runs OK.

Gemfile

source 'https://rubygems.org'

gem 'rails', '4.0.2'

gem 'protected_attributes' 
gem 'font-awesome-sass'
...
group :development, :test do
  gem 'sqlite3' # Use sqlite3 as the database for Active Record
end

gem 'rails_12factor', group: :production

group :production do
gem 'pg'
gem 'rails_serve_static_assets'
end

application.css

*= require font-awesome

I have precompiled assets, and modified my application-xxx.css file (according to this answer ) as follows:

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

my production.rb contains

config.serve_static_assets = true

When I load the app, there's no error on the console BUT the fonts are not loaded as a resource:

What could be the problem?

EDIT Problem solved, I'm afraid I had not read the console messages when I ran

rake assets:precompile RAILS_ENV=production

I had some invalid CSS which for some reason in localhost didn't matter but in production did. By the way, I switched to gem "font-awesome-rails" .

Answer 1

Well heroku compiles your css to sass and they gave a tool http://css2sass.herokuapp.com/ that can help help you convert your css to sass.

to get the gem "font-awesome-rails" into your app you can follow the instructions in font-awesome-rails remember that is really important to include the css file in application.css like

 /*
 *= require font-awesome
 */

wish you the best. and hope that this helps