Search code examples
ruby-on-rails-4twitter-bootstrap-3font-awesome-4

Rails 4.2 / Bootstrap 3 : trying to use font-awesome ... wo success


I am trying to use font-awesome, but upon running , I get the following error(s)

ActionController::RoutingError (No route matches [GET] "/assets/fonts/font-awesome/fontawesome-webfont.woff"):
....
ActionController::RoutingError (No route matches [GET] "/assets/fonts/font-awesome/fontawesome-webfont.ttf"):
....
ActionController::RoutingError (No route matches [GET] "/assets/fonts/font-awesome/fontawesome-webfont.svg"):

In my Gemfile I have:

 gem "font-awesome-rails"  # https://github.com/bokmann/font-awesome-rails

in my framework_and_overrides.css.scss I have:

// import the CSS framework
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome";

In my application.css I have:

/*
...
*= require font-awesome
*= require dashboard/framework_and_overrides
....
*/

I added in my application.rb:

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

And I run rake assets:clobber , to start on a clean basis .. now way , same errors

Thanks for your enlightenments ...


Solution

  • Remove from application.css:

    *= require font-awesome
    

    In your framework_and_overrides.css.scss add the following lines at the bottom:

    @import "font-awesome-sprockets";
    @import "font-awesome";
    

    UPDATE

    It turns out you have an issue with the routing of the asset. Rails creates paths to assets depending if they are pre-compiled or not. The safest way to make things work in all cases (both production and development) is to put the routes in font_url ,like this:

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

    Alternatively, you can link an external stylesheet (performance might get worse):

    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">