Bootstrap 3+Rails 4 - Certain Glyphicons not working

Question

I am trying to use bootstrap 3 in my rails 4 app. Followed this tutorial to set up bootstrap 3 using bootstrap saas from this github page.

Bootstrap is working fine but glyphicons are not working as expected.

Certain glyphicons are not displaying at all. For e.g. I tired to display a few of them for testing in my application.html.erb:

glyphicon glyphicon-floppy-disk -> <span class="glyphicon glyphicon-floppy-disk"></span>
</br>
glyphicon glyphicon-plus -> <span class="glyphicon glyphicon-plus"></span>
</br>
glyphicon glyphicon-minus -> <span class="glyphicon glyphicon-minus"></span> 

The icons render like this

The floppy-disk icon is not rendered at all (showing an invalid charecter) The plus and minus sigs are not bold and much smaller than the ones shown on the bootstap website.

I am also seeing the following messages on the rails console.

Started GET "/fonts/glyphicons-halflings-regular.woff" for 127.0.0.1 at 2014-02-22 16:29:54 -0800
ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.woff"):

Started GET "/fonts/glyphicons-halflings-regular.ttf" for 127.0.0.1 at 2014-02-22 16:29:54 -0800
ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.ttf"):

Started GET "/fonts/glyphicons-halflings-regular.svg" for 127.0.0.1 at 2014-02-22 16:29:54 -0800
ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.svg"):

I would really appreciate your inputs on this issue.

Thanks!

Answer 1

I had the same problem and found a solution. Full credit goes to Eric Minkel, who wrote a detailed blog post on the topic. I would highly suggest reading it for further reasoning.

1. Edit app/assets/stylesheets/application.css by adding:

   *= require bootstrap
   

2. Edit app/assets/javascripts/application.js by adding:

   //= require bootstrap
   

3. In config/application.rb, add the following after class Application < Rails::Application. It should look like this:

   class Application < Rails::Application
       config.assets.paths << "#{Rails}/vendor/assets/fonts"
   

4. In the terminal, compile your assets by running:

   rake assets:precompile RAILS_ENV=development
   

5. Edit the bootstrap.css file by changing @font-face resource locations from ../fonts/ to /assets/. It should look like this:

   @font-face {
       font-family: 'Glyphicons Halflings';
       src: url('/assets/glyphicons-halflings-regular.eot');
       src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/assets/glyphicons-halflings-regular.woff') format('woff'), url('/assets/glyphicons-halflings-regular.ttf') format('truetype'), url('/assets/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
   }
   

You're done. Just restart with rails s and the glyphicons should appear.

Answer 2

Just use:

@import "bootstrap-sprockets";
@import "bootstrap";

in your SCSS or SASS file. "bootstrap-sprockets" is required for image and font fix.

Chances are you already have:

@import "bootstrap";

declared in application.scss.

Answer 3

I was having this same problem. Solved by adding:

@import "bootstrap-sprockets";

above the existing line:

@import 'bootstrap';

in my /app/stylesheets/bootstrap_and_customisation.css.scss file