font glyphicons not working with bootstrap 3 and rails 4

Question

I cannot get glyphicons to work with bootstrap 3 and rails. I've scowered the internet and nothing i find helps. In my bootstrap.css file i have:

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

In application.rb, I have:

config.assets.enabled = true  
config.assets.paths << "#{Rails.root}/app/assets/fonts" 
config.assets.precompile += %w( .svg .eot .woff .ttf )

I have already tried running:

rake assets:precompile RAILS_ENV=development

In application.js I have:

//= require jquery
//= require jquery_ujs
//= require_tree .
//= require bootstrap

In application.css I have:

 *= require_self
 *= require_tree .
 *= require bootstrap
 */

All my fonts are stored in assets/fonts

I've already looked at the following and none of them have worked:

Bootstrap 3+Rails 4 - Certain Glyphicons not working

How to add a custom font to Rails app?

How can I fix this?

Answer 1

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

Answer 2

Upgrading bootstrap gems, if you use them, fixed it for me:

gem 'sass-rails', '~> 5.0.1' gem 'bootstrap-sass', '~> 3.3.5.1'

Answer 3

I'll post my fix.

Because I previously precompiled my assets locally, then added glyphicons after, heroku was not picking up those assets. So I had to re-compile them locally again by doing:

RAILS_ENV=production bundle exec rake assets:precompile

git add public/assets

git commit -m "vendor compiled assets"

And pushing to heroku

git push heroku master

from heroku: https://devcenter.heroku.com/articles/getting-started-with-ruby#introduction