CODEWITHSUNDEEP
cssruby-on-railstwitter-bootstrapheroku
Matthew Berman
Matthew Berman

Reputation: 8631

rails app not finding fontawesome icons on heroku

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?

Upvotes: 6

Views: 8962

Answers (7)

Sauronlord
Sauronlord

Reputation: 237

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)

Upvotes: 2

Ritikesh
Ritikesh

Reputation: 1228

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!

Upvotes: 2

Moin Haidar
Moin Haidar

Reputation: 1694

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

Upvotes: 2

Gajanan Ghuge
Gajanan Ghuge

Reputation: 162

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

Upvotes: 0

Jay
Jay

Reputation: 4007

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)

Upvotes: 12

Rajesh Omanakuttan
Rajesh Omanakuttan

Reputation: 6918

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.

Upvotes: 3

Alex Hofsteede
Alex Hofsteede

Reputation: 251

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/)

Upvotes: 0

Related Questions