rails app not finding fontawesome icons on heroku

Question

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?

Answer 1

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)

Answer 2

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.