Rails 4.1 and Bootstrap 3 glyphicons are not working

Question

I am trying to get rid of the glyphicon errors in my Rails 4 project that's using Bootstrap 3. I'm not using any Bootstrap gems to add it to the asset pipeline. I manually added bootstrap.css and bootstrap.js to their respective app/assets directories and added them to application.css and application.js What I'm seeing now is the following in my web browser's console:

GET http://localhost:3000/fonts/glyphicons-halflings-regular.woff 404 (Not Found) localhost/:1
GET http://localhost:3000/fonts/glyphicons-halflings-regular.ttf 404 (Not Found) localhost/:1
GET http://localhost:3000/fonts/glyphicons-halflings-regular.svg 404 (Not Found) 

What can be done to fix this in a Ruby on Rails application? I tried copying said files to app/assets/fonts and popped this into application.rb :

config.assets.paths << "#{Rails}/app/assets/fonts"

No luck.

Answer 1

All solutions provided above are dirty hacks. The correct way to solve this issue is to include "bootstrap-sprockets" before bootstrap in your sass files:

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

Answer 2

To get the glyphicons working I had to add a line to the config/application.rb file. Add the following within class Application < Rails::Application.

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

Then at the terminal run the command to get the assets to compile:

rake assets:precompile RAILS_ENV=development

Now we need to update the bootrap.css file (you'll likely need to update the bootstrap.min.css file as a result, too), search for @font-face with your text editor and update the paths to the font urls to include /assets/glyphicons-halfings-regular.* (include the file extension).

This is what the url's will be originally in the bootstrap.css file.

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

You want to change each of these resource locations to /assets/glyphicons-halfings-regular.* as shown below.

@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');
}

SOURCE: [Erik Minkel Blog]

Answer 3

Basically you should just import bootstrap

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

Problems appear when you import bootstrap components before @import "bootstrap-sprockets"; Overrides should go after @import "bootstrap-sprockets";

// bootstrap-sprockets goes first
@import "bootstrap-sprockets";

// Overrides
@import "bootstrap/variables"; // it uses $bootstrap-sass-asset-helper which is defined in bootstrap-sprockets
$btn-primary-bg: $gray-light;

@import "bootstrap";

Answer 4

Add the woff, ttf and svg files to:

RAILS_ROOT/vendor/assets/fonts

Create this if it doesn't exist. They should be present in the build of bootstrap you downloaded.

Also, you'll need to add this to your application.css after all your require statements:

@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');
}

Answer 5

Moving the fonts to the /app/public folder worked but didn't seem like the Rails way.

What worked for me was putting them in /app/assets/fonts and commenting this out in bootstrap.css:

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