CODEWITHSUNDEEP
ruby-on-railsrubyherokuruby-on-rails-4font-awesome
THpubs
THpubs

Reputation: 8172

Font awesome Rails won't work after deploying. It looks like bad Unicode characters. Why?

In my local machine fontawesome is working perfectly (Im using 4.1 gem). But when uploaded to Heroku it stops working. I looks like bad unicode characters. I have included the following line in config and precompiled assets but it didn't work :

config.assets.paths << Rails.root.join(‘app’, ‘assets’, ‘fonts’)
config.assets.precompile += %w( .svg .eot .woff .ttf )

Please look at this image :

enter image description here

On the left is the problem. On the right is the correct version. What might be the problem? Here's the link to the Heroku app : http://fast-garden-6871.herokuapp.com/

Update It looks like /assets/fontawesome-webfont.eot is missing in the production machine!

Upvotes: 2

Views: 834

Answers (2)

Shahzad Tariq
Shahzad Tariq

Reputation: 2857

In your css file, change url to asset-url under @font-face.

Also did you precompile assets after deployment?

RAILS_ENV=production rake assets:precompile

Upvotes: 2

THpubs
THpubs

Reputation: 8172

Finally fixed it! In custom.css I added the following lines:

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

The problem was, rails will generate the font file with a hash like it generate css files. But the css is not updated with this new generated file. So the system can't find the font. With the above code, the system will assign the right url!

Upvotes: 1

Related Questions