font-awesome and images is not loaded in ruby-on-r

问题:

I am using font-awesome in ruby-on-rails-4 and in my development mode everything works fine in both chrome and firefox. But i am not able to find out what is the reason that font-awesome and images is not loaded into production mode, where font-awesome is works fine in chrome.

回答1:

I had this exact same issue.

As it turns out it was due to the fact that I was compiling assets in staging mode and running in production mode.

回答2:

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)

回答3:

Try this for font-awesome in rails 4:

https://coderwall.com/p/1uqvkq

Hope it will help.

Or Try this if above one not working for you. first: add app/assets/fonts to the asset path (config/application.rb)

config.assets.paths << Rails.root.join("app", "assets", "fonts")

then move the font files into /assets/fonts (create the folder first)

Now rename the font-awesome.css to font-awesome.css.scss.erb and edit it like this: change:

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

to this:

@font-face {
  font-family: "FontAwesome";
  src: url('<%= asset_path("fontawesome-webfont.eot") %>');
  src: url('<%= asset_path("fontawesome-webfont.eot") + "?#iefix" %>') format('eot'), url('<%= asset_path("fontawesome-webfont.woff") %>') format('woff'), url('<%= asset_path("fontawesome-webfont.ttf") %>') format('truetype'), url('<%= asset_path("fontawesome-webfont.svg") + "#FontAwesome" %>') format('svg');
  font-weight: normal;
  font-style: normal;
}

Lets try this.