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

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).
>app
>>assets
>>>fonts
>>>>4 glypicons icon files.
>>>images
>>>>N/A
>>>javascripts
>>>>Bootstrap.js (Jquery is installed in a gem)
>>>stylesheets
>>>>Bootstrap.css
Everything is imported correctly, but the issue is that the glyphicons arent working and I need them!

Answer 1

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!

Answer 2

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 3

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 4

I was also struggling to make boostrap3 glyphicon work in rails 4.
I solved it by adding
#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.woff')) format('woff'), url(asset_path('glyphicons-halflings-regular.ttf')) format('truetype'), url(asset_path('glyphicons-halflings-regular.svg#glyphicons_halflingsregular')) format('svg');
}`
to application.css.scss file
and
config.assets.paths << "#{Rails}/vendor/assets/fonts"
to application.rb file.

Answer 5

I think you might be having a problem with the asset pipeline
You want to change bootstrap.css to bootstrap.css.scss and then replace where it uses
#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');
}
with font-path (look at section 2.3.2 - CSS and Sass)
#font-face {
font-family: 'Glyphicons Halflings';
src: font-path('glyphicons-halflings-regular.eot');
src: font-path('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
font-path('glyphicons-halflings-regular.woff') format('woff'),
font-path('glyphicons-halflings-regular.ttf') format('truetype'),
font-path('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
Also in your config/environments/production.rb
# Precompile additional assets
config.assets.precompile += %w( .svg .eot .woff .ttf )
In your config/application.rb
# Add the fonts path
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
Check out another SO post for a similar problem
Hope this helps

Answer 6

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 7

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 8

You can also try this:
#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');
}
You just need to convert your your_css.css file to your_css.css.erb

Answer 9

You can copy all the bootstrap font files to public/fonts and it will work. No need for imports or changes in the application.rb.

Answer 10

I tried with suggested solution and it did not work for me, here is a generic solution that helps you troubleshoot any problem related to this you might have.
Here is the resulting font face definition with bootstrap-sass:
#font-face {
font-family: 'Glyphicons Halflings';
src: asset-url('bootstrap/fonts/glyphicons-halflings-regular.eot');
src:
asset-url('bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
asset-url('bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'),
asset-url('bootstrap/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
asset-url('bootstrap/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Answer 11

According to Bootstrap 3 Glyphicons are not working, there's a bug with the Bootstrap customizer that messes up the glyphicon fonts. I had the same issue, but I was able to fix it by downloading the entirety of bootstrap from http://getbootstrap.com/, and then copying the font files to the correct location.

Answer 12

In Rails 4, with sass, Bootstrap 3.2.0, and the bootstrap-sass gem use:
#import "bootstrap";
#import "bootstrap/theme";

Answer 13

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 14

In my index.html.slim file, I replaced span.glyphicon.glyphicon-calendar with span.fa.fa-calendar and it worked.

Answer 15

Make sure you have set
# config/environments/production.rb
config.assets.compile = true
And add fonts to precompile list
# config/initializers/assets.rb
config.assets.precompile += %w(*.eot *.svg *.ttf *.woff *.woff2)

Answer 16

In my case I used this <i class="icon-plus"></i>, which I took from oficcial site of Bootstrap and didn't see anything. But instead, it is neccessary to use this <i class="glyphicon glyphicon-plus"></i>

Answer 17

Provided that you have the glyphicons files in app/assets/fonts (if you don't, you can download them from the bootstrap-saas repo), create app/assets/stylesheets/fonts.scss and add the following:
#font-face {
font-family: 'Glyphicons Halflings';
src: font-url('glyphicons-halflings-regular.eot');
src: font-url('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
font-url('glyphicons-halflings-regular.woff') format('woff'),
font-url('glyphicons-halflings-regular.ttf') format('truetype'),
font-url('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}