Geek Answers Handbook

Rails app does not find font icons on hero

I installed the bootstrap theme and everything works fine locally. However, when I went to click on the hero, my application could not find the fonts. I precompiled the assets and clicked on the hero, but no badges.

So, I created my development environment, such as heroku, with the following in development.rb:

config.assets.debug = true # Disable Rails 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 cannot find font files. Font files are located in two places:

 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, how they are loaded from a precompiled 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?

+6
source share
7 answers

The simplest fix for me was to use the CDN described on the Awesome Font page to “start” .

Delete any local copy of the style 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 from 07/07/2014, see the link above for the latest version)

+12
source

Keep your development environment the way it was. We need to pre-assemble the assets only in production mode.

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 click on heroku . Let it be good.

+3
source

I tried using the resource url instead of the url by putting the 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; }
+2
source

I just cleaned up my public / assets folder and compiled the assets again. Depressed heroic and et voilà! He liked the charm. There were many duplicate files, and assets were not updated. Therefore, had to be cleaned. I tried this when none of the above methods worked for me.

Note: I am, Rails - 4.1.6 Ruby - 2.1.3 font-awesome-rails - 4.2.0.0

Hope this helps anyone who comes looking for the right solution!

+2
source

I had the same issue with Rails 4.2 and the awesome gem font "font-awesome-rails".

I had to use the resource path (since I am using sass, but I also assume that the resource link is working) in your @ font-face declaration.

Make sure you compile for production, not development, or for any other environment:

 RAILS_ENV=production bundle exec rake assets:precompile

Here are 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 (augustf comment)

+1
source

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

0
source

Make the 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

}

he works for me

0
source

More articles:


All Articles