Bootstrap 3 Glyphicons not showing on rails production server

Question

I am unable to load Bootstrap 3 Glyphicons fonts on my live server which are working perfectly on my local server but not on live server.

I have tried each and everything from SO to everything but it still didnt work for me.

Here is what I am doing:

applicatin.css.scss

@import "bootstrap-sprockets";
@import 'home';
@import "bootstrap";

@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.woff2") format("woff2"), 
        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");
}

What I have tried so far:

@import "bootstrap-sprockets";
@import 'home';
@import "bootstrap";

@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.woff2") format("woff2"), 
        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");
}

and

@import "bootstrap-sprockets";
@import 'home';
@import "bootstrap";

@import url("http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");

and

@import "bootstrap-sprockets";
@import 'home';
@import "bootstrap";

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");

and

@import url("http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
@import "bootstrap-sprockets";
@import 'home';
@import "bootstrap";

and

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
@import "bootstrap-sprockets";
@import 'home';
@import "bootstrap";

but all of them didn't work for me but they are fine on local server.

when you specified the `http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css`, did you precompile the assets after that? — Amit Badheka, Aug 20 '15 at 11:19
No, I didnt precompile them on live server. Isnt anything happen to my server if I does this? This is my live site — , Aug 20 '15 at 11:21
There should not be any issue on the production server, compile the assets locally by `RAILS_ENV=production rake assets precompile` and the update and check on staging environment. and then update the code on production — Amit Badheka, Aug 20 '15 at 11:23
I'm not sure why you're manually adding all these unnecessary @import statements. You seem to be loading Bootstrap from CDN, and since that is the case all you need is to stylesheet_link_tag it in you application.scss and then rake assets:precompile RAILS_ENV=production and you're good to go. possibly a similar question http://stackoverflow.com/questions/30239842/rails-4-using-cdn-in-production — moeabdol, Aug 20 '15 at 20:39

The Fabio · Accepted Answer · 2015-12-16T20:58:18.860

This is the asset pipeline getting in your way...

Please follow these steps to fix it:

Copy font files glyphicons-halflings-regular.* to the folder you-app-path/vendor/assets/fonts
Copy file boostrap.css to folder you-app-path/vendor/assets/stylesheets
Rename copied file boostrap.css to boostrap.css.erb

Edit file boostrap.css.erb adjusting the @font-face variable as follows:

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

Add/adjust the following line in file you-app-path/config/initializers/assets.rb:

Rails.application.config.assets.precompile += %w(*.svg *.eot *.woff *.woff2 *.ttf)

add this line to file you-app-path/app/assets/stylesheets/application.css.scss:

*= require bootstrap

and finally, restart your rails app and all should work.

score 1 · Answer 2 · answered Aug 20 '15 at 11:56

1

You can place all you fonts in a folder #{Rails.root}/public/fonts folder and change your code according to the following.

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

answered Aug 20 '15 at 11:56

Amit Badheka

2,677
4
19
29

How can I have physical fonts folder? from where I need to download them? you can see its part of bootstrap in which these all resides. – Aug 20 '15 at 12:07
You get all bootstrap fonts at http://getbootstrap.com/getting-started/ . Place the fonts folder in the public folder of rails project and change the font path accordingly – Amit Badheka Aug 20 '15 at 12:13

score 0 · Answer 3 · answered Aug 20 '15 at 11:33

0

do these changes

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

And if again not loading any other Glyphicons then change its path ../fonts/ and it will get resolved

answered Aug 20 '15 at 11:33

Gaurav Mamidwar

338
1
12

`../fonts/ ` to what path? please explain? – Aug 20 '15 at 11:40
It says: `"NetworkError: 404 Not Found - http://lvh.me:3000/fonts/glyphicons-halflings-regular.woff"` and `"NetworkError: 404 Not Found - http://lvh.me:3000/fonts/glyphicons-halflings-regular.ttf"` – Aug 20 '15 at 11:42
it works on local: `@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'); }` would that work on production well?? thats my question. – Aug 20 '15 at 11:46
I have this in my bootstrap.min.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(/assets/glyphicons-halflings-regular.woff2) format('woff2'),url(/assets/glyphicons-halflings-regular.woff) format('woff'),url(/assets/glyphicons-halflings-regular.ttf) format('truetype'),url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')}` And this code work well in development and prod also ...do changes accordingly – Gaurav Mamidwar Aug 20 '15 at 12:50
Did you place fonts folder in directory and where? – Aug 20 '15 at 12:56
Dir structure will be app -> Assets -> - fonts, javascripts, stylesheets,images I am using what rails by default provides. – Gaurav Mamidwar Aug 20 '15 at 12:58
thank you so much. and how to get `fonts` folder? i know from bootstrap but link please? – Aug 20 '15 at 13:00
in config/application.rb add line `config.assets.paths << Rails.root.join("app", "assets", "fonts")` – Gaurav Mamidwar Aug 20 '15 at 13:05

score 0 · Answer 4 · answered Jul 06 '16 at 20:01

0

I had the same symptoms that were caused by a CORS issue with my CDN. Was obvious once I finally opened my browser's JavaScript console.

answered Jul 06 '16 at 20:01

webdevguy

975
10
17

Bootstrap 3 Glyphicons not showing on rails production server

4 Answers4