LearningROR LearningROR - 4 months ago 98
CSS Question

Bootstrap 3 Glyphicons not showing on rails production server

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.

Answer

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

Please follow these steps to fix it:

  1. Copy font files glyphicons-halflings-regular.* to the folder you-app-path/vendor/assets/fonts
  2. Copy file boostrap.css to folder you-app-path/vendor/assets/stylesheets
  3. Rename copied file boostrap.css to boostrap.css.erb
  4. 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');
    }
    

  5. 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)
  1. add this line to file you-app-path/app/assets/stylesheets/application.css.scss:
*= require bootstrap
  1. and finally, restart your rails app and all should work.
Comments