Ruby on Rails Bootstrap Glyphicons not working

Question

I have added bootstrap to my site. Here is the structure I am using. (I cannot whatsoever remove the bootstrap.css file since it I modified it to my liking).

Answer 1

Apparently Chrome has been broken for months re this issue.

This worked for me when I put it in the top of my customization_css.css.scss file

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

Answer 2

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.

Answer 3

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

Answer 4

When i use bootstrap in my rails apps i use the bootstrap-sass gem.

https://github.com/thomas-mcdonald/bootstrap-sass

You can override it. Simply import it as the docs explain. Then Import or paste your modified files.

In a php project, the glyph weren't working, i download the classic bootstrap zip and i extracted the glyph files to replace them in the project. In my memories the bug appears when you generate a custom bootstrap style from their site (the source of the bug can be wrong).

Hope this helps!

Answer 5

Bootstrap 3 icons look like this:

<i class="glyphicon glyphicon-indent-right"></i>

whereas Bootstrap 2 looked like this:

<i class="icon-indent-right"></i>

If the code you are using isn't up to date (check for a b3 branch), then you may have to fork and change the icon names your self.

Answer 6

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!