Ruby on Rails Bootstrap Glyphicons not working Ruby on Rails Bootstrap Glyphicons not working ruby-on-rails ruby-on-rails

Ruby on Rails Bootstrap Glyphicons not working


November 2015 EDIT: I would recommend this gem: https://github.com/twbs/bootstrap-sass It is actively maintained by the Bootstrap community and works really well with Ruby on Rails.

I was having a very similar issue as you but I figure it out! Find this part in your 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');}

and replace ../fonts/ with /assets. This is what your final code will look like.

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

I hope this helped!


If you are using bootstrap-sass and you have this issue try to import bootstrap like this in one of your scss files. If you use sass, just convert the syntax:

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


For me as a twitter-bootstrap-rails user:

Thanks to take's post @ GitHub

Adding this:

/* Override Bootstrap 3 font locations */@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');}

to my application.css fixed the issue.

Hope to be helpful.