6

I installed a bootstrap theme and everything is working well locally. However, when I went to push to heroku, my app couldn't find the fonts. I precompiled the assets and pushed to heroku, but no icons.

So, I made my development environment like heroku with the following in development.rb:

  config.assets.debug = true

  # Disable Rails's static asset server (Apache or nginx will already do this).
  config.serve_static_assets = true

  # Compress JavaScripts and CSS.
  config.assets.js_compressor = :uglifier
  # config.assets.css_compressor = :sass

  # Do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = false

  # Generate digests for assets URLs.
  config.assets.digest = true

now, my dev environment can't find the font files. The font files are in two locations:

app/assets/fonts/fontawesome-webfont.*
public/assets/fontawesome-webfont.*

however, I get this error:

ActionController::RoutingError (No route matches [GET] "/assets/fontawesome-webfont.svg"):

here's how they are being loaded from the precomplied css file (application-xxxxxxxxx.css):

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

what am I doing wrong?

Matthew Berman
  • 8,481
  • 10
  • 49
  • 98

7 Answers7

12

The easiest fix for me was to use the CDN described on the Font Awesome "get started" page.

Delete any local copy of the stylesheet and font files, and just put this in the head:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

(current as of 07-07-2014, see link above for most recent release)

Jay
  • 3,857
  • 2
  • 23
  • 25
3

Keep the development environment as it was. We need to precompile assets in production mode only.

Here, I hope you need to add:

Application.rb

# Enable the asset pipeline
config.assets.enabled = true
config.assets.paths << "#{Rails.root}/app/assets/fonts"

and update:

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

Then run rake assets:precompile and push it to heroku. May that would go well.

Rajesh Omanakuttan
  • 6,788
  • 7
  • 47
  • 85
  • i added that line of code and precompiled again..didn't seem to do anything. still getting the same error. – Matthew Berman Apr 04 '14 at 18:45
  • are you sure I should be pointing to the app/assets folder and not the public/assets folder? – Matthew Berman Apr 04 '14 at 18:51
  • Hey the above line in application.rb is for including fonts in to the asset paths in order to take it for precompilation in production mode. When you precompile the assets ins production, all of them will go to 'public/assets' folder. You can change the default path using the option config.assets.prefix. – Rajesh Omanakuttan Apr 05 '14 at 01:49
  • Even then, if it is not correctly taking, please refer http://anotheruiguy.roughdraft.io/7379570-custom-web-fonts-and-the-rails-asset-pipeline, also http://stackoverflow.com/questions/10905905/using-fonts-with-rails-asset-pipeline?answertab=active#tab-top – Rajesh Omanakuttan Apr 05 '14 at 02:00
2

I tried using asset-url instead of url putting appropriate files in assets/fonts and it worked: 

@font-face{
  font-family: 'Font-Awesome';
  src: asset-url('font-awesome.eot');
  src: asset-url('font-awesome.eot?#iefix') format('embedded-opentype'),  
  asset-url('font-awesome.svg') format('svg'),  
  asset-url('font-awesome.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
mindriot
  • 14,149
  • 4
  • 29
  • 40
Moin Haidar
  • 1,654
  • 1
  • 16
  • 16
2

I simply cleaned up my public/assets folder and precompiled the assets again. Pushed to heroku and et voila! It worked liked a charm. There were a lot of repetitive files and the assets weren't updated. Hence had to clean up. I tried this when none of the above methods seemed to work for me.

Note: I'm on, Rails - 4.1.6 Ruby - 2.1.3 font-awesome-rails - 4.2.0.0

Hope it helps anybody who comes looking for the right fix!

Ritikesh
  • 1,228
  • 1
  • 9
  • 19
2

I had the exact same issue with Rails 4.2 and Font Awesome gem 'font-awesome-rails'.

I had to use asset-path (since I'm using sass, but I presume asset-url works too) in your @font-face declaration.

Make sure that you compile for production and not development or some other environment:

RAILS_ENV=production bundle exec rake assets:precompile

Here's the resources that helped me:

http://anotheruiguy.roughdraft.io/7379570-custom-web-fonts-and-the-rails-asset-pipeline

https://github.com/concerto/concerto/issues/518 (The comment by augustf)

Sauronlord
  • 237
  • 2
  • 13
0

Perhaps you need to add.

config.assets.precompile += %w( .svg .eot .woff .ttf )

(from http://www.jaynathan.org/2013/02/using-font-awesome-with-rails-asset-pipeline/)

Alex Hofsteede
  • 251
  • 2
  • 5
0

Do following changes 

@font-face{
  font-family:'FontAwesome';
  src:font_url('font/fontawesome-webfont.eot?v=3.0.1');
  src:font_url('font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
  font_url('font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
  font_url('font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight:normal;
  font-style:normal

}

it work for me

Gajanan Ghuge
  • 162
  • 1
  • 11