Rails 4.1 and Bootstrap 3 Glyphicons Are Not Working

font glyphicons not working with bootstrap 3 and rails 4

If you're using bootstrap-sass gem, follow my setup below. If not give it a try, it's the easiest bootstrap setup that I've used.

By the way I'm currently using rails Versions 4.1.6 and 4.1.8

Two gems

gem 'bootstrap-sass'
gem 'autoprefixer-rails'

Your Application.js should look like this below (turbolinks optional)

  /app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

Style sheet should have these two imports

/app/assets/stylesheets/application.scss

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

if this setup doesn't work for you try
font-path
http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets

section 2.3.2 css and sass

so your code would go from:

url('/assets/glyphicons-halflings-regular.eot');

to
font-path('glyphicons-halflings-regular.eot');

Some Glyphicons not working with bootstrap-sass

I solved the problem by upgrading everything I could think of. The configuration that finally worked was

gem 'sprockets-rails', '>=2.1.4'
gem 'sass-rails', '~> 5.0.1'
gem 'compass-rails', '~> 2.0.4'
gem 'bootstrap-sass', '~> 3.3.5.1'

Not sure which did it, but I was very pleased to see those glyphicons.

Bootstrap 2 Glyphicons not working with Rails 4

Adding '*.png' to config.assets.precompile precompiled all the images and seems to have fixed the issue.

Bootstrap 3 Glyphicons are not working

I was looking through this old question of mine and since what was supposed to be the correct answer up until now, was given by me in the comments, I think I also deserve the credit for it.

The problem lied in the fact that the glyphicon font files downloaded from bootstrap's customizer tool were not the same with the ones that are downloaded from the redirection found at bootstrap's homepage. The ones that are working as they should are the ones that can be downloaded from the following link:

http://getbootstrap.com/getting-started/#download

Anyone having problems with old bad customizer files should overwrite the fonts from the link above.

---

Related Topics