CODEWITHSUNDEEP
cssruby-on-railstwitter-bootstrapruby-on-rails-4glyphicons
user5084534
user5084534

Reputation:

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.

Upvotes: 7

Views: 2850

Answers (4)

webdevguy
webdevguy

Reputation: 993

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.

Upvotes: 0

The Fabio
The Fabio

Reputation: 6260

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.

Upvotes: 8

Amit Badheka
Amit Badheka

Reputation: 2672

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

Upvotes: 1

Gaurav Mamidwar
Gaurav Mamidwar

Reputation: 338

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

Upvotes: 0

Related Questions