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