Bootstrap 3 Glyphicon errors

Question

I realize there are similar questions that have been answered here, but many of those answers are using gems or modifying Bootstrap's files directly. While those are valid configurations, I want to increase my knowledge set in this area (Sprockets, Rails Pipeline, front-end development in general) and want to understand why this isn't working, what the underlying problem is.

Ruby 2.0.0-p353, Rails 4.0.2, Bootstrap 3.0.3, Nginx 1.4.4, Passenger 4.0.33

I downloaded the latest Bootstrap zip from their site, performed all of the operations found here to included those files directly into my application, and am able to get the glyphicons to show up exactly as expected in my development environment. However, when I deploy to production, the glyphicons show up as squares in Chrome. I added the individual file extensions for the glyphicons files to the production precompile and verified they're showing up in my public/assets folder. The only difference between the js/css files and the glyphicon files is that there's no gzipped file alongside the glyphicon files.

production.rb:

config.assets.precompile = ['*.js', '*.css', '*.eot', '*.svg', '*.ttf', '*.woff']

I know that Rails loads assets differently between development and production, but why isn't it seeing or understanding the glyphicon assets in production? Is there a way to fix this with my current configuration, or do I need to change the way I'm including these assets in a way to allow me to fix this error?

Also, in both development and production I get the following errors every time I render a page that uses a glyphicon, but the icons still show up. Is this related?

ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.woff")
ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.ttf")
ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.svg")

`@import "bootstrap-sprockets"` before `@import "bootstrap"` helped me, though I don't know the cause of the problem. — Konstantine Kalbazov, Sep 01 '14 at 15:11

score 3 · Answer 1 · edited May 23 '17 at 12:22

3

You should manually download the glyphicons fonts manually from the site and put it inside your app/assets/stylesheets/fonts folder.

There is some problem which is not yet fixed by bootstrap gem

You can refer the following link

Bootstrap 3 Glyphicons are not working

edited May 23 '17 at 12:22

Community

1
1

answered Feb 25 '14 at 05:25

Andolasoft Inc

1,296
1
7
16

score 0 · Answer 2 · answered Jun 21 '14 at 08:01

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"
```
In the terminal, compile your assets by running:
```
rake assets:precompile RAILS_ENV=development
```

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.

Bootstrap 3 Glyphicon errors

2 Answers2