Bootstrap 3+Rails 4 - Certain Glyphicons not worki

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

For me this was an issue with incompatibility of versions between bootstrap-sass and sass.

If you inspect your generated application.css you will see the @font-face is wrapped inside a @at-root, which is a new sass declaration not supported by the version of sass I was using.

I've upgraded sass-rails to 5.0.3 and sass to 3.4.16 and it worked (sass needs to be at least 3.3).

Answer 2

I had the same problem. Something is wrong with the font path in bootstrap. Fortunately it is a fairly easy fix:

$icon-font-path: 'bootstrap/';

This fixed it for me. Should go before importing bootstrap-sass. You might need to change the value here.

Answer 3

You can copy all the bootstrap font files to public/fonts and it will work

Answer 4

Using rails 4.2.6

I had to edit config/application.rb

I added this line

.
.
.
class Application < Rails::Application
   config.action_controller.relative_url_root = '/myapp'

Now the fonts were being referenced relative to the relative_url_root value.

Answer 5

Ran into same problems when upgrading to Rails 4.1.4, bootstrap-sass 3.2.0.

Good hints above but none did the trick for me.

These steps worked:

1. Copy font files to RAILS_ROOT/vendor/assets/fonts/bootstrap/ (you probably need to create the directory)

2. Add this to config/application.rb

   config.assets.paths += %W("#{Rails.root}/vendor/assets/fonts")

Didn't need any special directives or sass variable re-definitions.

Answer 6

I am using twitter-bootstrap-rails, and the error message is /assets/twitter/fonts/...

The reason is the twitter-bootstrap-rails gem doesn't include the Glyphicons resources in it's vendor directory. I have tried all solutions above, but none of them worked.

The final solution for me is to download the zip file from bootstrap official site, unzip it, move the missing files to public/assets/twitter/fonts directory. It works for my development environment.