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.

score 11 · Answer 1 · answered Oct 10 '14 at 15:37

11

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";

answered Oct 10 '14 at 15:37

Lucas

502
1
5
15

score 1 · Answer 2 · answered May 28 '14 at 14:31

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]

I avoid pre-compiling assets in development. Rails will serve your cached precompiled assets instead of the changes you are trying to develop... will cause headaches. — penner, Jul 17 '14 at 16:22

score 1 · Answer 3 · answered May 30 '16 at 09:32

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";

Nikhil · Answer 4 · 2014-05-28T14:32:11.660

0

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

edited May 28 '14 at 14:32

answered May 28 '14 at 14:23

Nikhil

3,042
2
16
16

any reason to put them in vendor vs the usual `app/assets/` directory? – randombits May 28 '14 at 14:26
The vendor/* assets are only included if they're explicitly mentioned in the application.css/js files. This is probably how you should handle anything that you're not writing yourself. On my projects, bootstrap is always in the vendor/* tree. – Nikhil May 28 '14 at 14:29
4

It seems the only way I could get this to work is to copy the fonts to the public/fonts directory , not sure if that's the right way of going about this. – randombits May 28 '14 at 14:58
1

It probably can't get more 'right' than this way - https://github.com/twbs/bootstrap-sass - It's the officially recommended way of including bootstrap in Rails applications. – Nikhil May 28 '14 at 15:31
In the end I hacked this with along the lines @randombits suggested, copying the font files directly into `public/assets/fonts`. I didn't like it but after reading a dozen blog posts and multiple StackOverflow answers, this is the only thing that worked. – Joe May 20 '15 at 21:41
@randombits saved my day! – iGian Jul 21 '18 at 16:34

score 0 · Answer 5 · edited Jul 13 '15 at 20:36

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

Rails 4.1 and Bootstrap 3 glyphicons are not working

5 Answers5

Linked