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!

Solution 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.

Solution 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.

Solution 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

Solution 4

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.

Solution 5

Update to this. I was having the same issue and went through the steps provided by the #1 answer from Oddurs. That didn't work for me for some reason. And then I realized it had to do with the file structure in my public folder (not sure why mine was different).

Basically I got it to work by adding "/bootstrap" after "/assets" since all my glyphicons were in a "/bootstrap" folder I believe by default

So instead of 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');
}

I did this:

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

in the application.css. Hopefully that helps somebody

View more solutions

Comments

[user2110836]

Was having the same problem, Some of the fonts were missing. Step 4 fixed it for me. Thanks.

[Admin]

thanks , solved ... was using the css.min, so I decompressed it and did the modification step 5

[Mark Hustad]

Same here. Updated my gem and things weren't working till I did this.

[peterept]

that worked for me rails 4.1 also. I tested in both dev environment (and deleted my entire public/assets folder) - it worked. Then I switched to needing precomiled assets in environments/development.rb config.assets.debug = false; config.assets.compile = false; config.assets.digest = true and $ rake assets:precompile and can see public/assets/bootstrap with the fonts. Restarted rails and it also works. Thank you sooo much!!

[peterept]

My full font include in application.scss was @font-face { font-family: 'Glyphicons Halflings'; src: url(asset_path('bootstrap/glyphicons-halflings-regular.eot')‌​); src: url(asset_path('bootstrap/glyphicons-halflings-regular.eot?#‌​iefix')) format('embedded-opentype'), url(asset_path('bootstrap/glyphicons-halflings-regular.woff'‌​)) format('woff'), url(asset_path('bootstrap/glyphicons-halflings-regular.ttf')‌​) format('truetype'), url(asset_path('bootstrap/glyphicons-halflings-regular.svg#g‌​lyphicons_halflingsr‌​egular')) format('svg'); }

[Adam Plumb]

In addition to this I also had to add config.assets.precompile += %w( *.svg *.eot *.woff *.ttf ) to my application.rb to get the precompiler to see the font files.

[Marius Butuc]

Confirming this is the solution that works for Rails 4.2.1 as well.

[RubyRedGrapefruit]

No, this does not work for Rails 4.2.1. At least not here, and at least not with the 'glyphicon-log-book' icon. It remains invisible.

[Mr_LinDowsMac]

I already have those imports in my application.css.scss file I still get square boxes instead glyphicons :/

[Marat]

And don't forget to create fonts folder in vendor/assets and copy fonts to it. Fonts are available in bootstrap.zip from bootstrap site.

[Andrew Potapov]

Important, order matters.

[LunaCodeGirl]

rake assets:precompile RAILS_ENV=development was all I needed. This answer really shouldn't be at the bottom.

[Mark Davies]

I did the a similar thing and set the config.relative_url_root in the environment files (app/environments/production.rb) and that fixed my problem. We control this at environment level because our production/uat environments require a relative path but development and test do not.