Rails 4 locating bootstrap glyphicons on Heroku

Question

I have a web app that I deployed to Heroku. In the application I am making use of Bootstrap's glyphicon's installed using Bower. I realize that this is a common problem, but none of the solutions I have seen have sold the problem for me.

I modified my bootstrap.css.scss to contain the following:

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

And then in my application.rb

config.assets.paths << Rails.root.join('vendor', 'assets',  bower_components', 'fonts')
config.assets.precompile += %w( *.eot *.svg *.ttf *.woff *.otf *.woff2)

In my production.rb I have:

  config.serve_static_files = true
  config.assets.compress = true
  config.assets.compile = true
  config.assets.digest = true
  config.assets.precompile += %w( '.woff', '.eot', '.svg', '.ttf' )

When I check my console on heroku I get the following errors accompanying missing fonts for glyphicons:

GET http://hipster-meet.herokuapp.com/glyphicons-halflings-regular.woff2 
GET http://hipster-meet.herokuapp.com/glyphicons-halflings-regular.woff 
GET http://hipster-meet.herokuapp.com/glyphicons-halflings-regular.ttf 

When I search for the files on Heroku I find:

glyphicons-halflings-regular-13634da87d9e23f8c3ed9108ce1724d183a39ad072e73e1b3d8cbf646d2d0407.eot
glyphicons-halflings-regular-13634da87d9e23f8c3ed9108ce1724d183a39ad072e73e1b3d8cbf646d2d0407.eot.gz
glyphicons-halflings-regular-42f60659d265c1a3c30f9fa42abcbb56bd4a53af4d83d316d6dd7a36903c43e5.svg
glyphicons-halflings-regular-42f60659d265c1a3c30f9fa42abcbb56bd4a53af4d83d316d6dd7a36903c43e5.svg.gz
glyphicons-halflings-regular-a26394f7ede100ca118eff2eda08596275a9839b959c226e15439557a5a80742.woff
glyphicons-halflings-regular-e395044093757d82afcb138957d06a1ea9361bdcf0b442d06a18a8051af57456.ttf
glyphicons-halflings-regular-e395044093757d82afcb138957d06a1ea9361bdcf0b442d06a18a8051af57456.ttf.gz

I am interpreting this to mean that Bootstrap is referencing the files but without the hash added by sprockets. Is there anyway for me to get Bootstrap to point to the correct location.

Answer 1

You might try this: use font-url rather than url(asset_path

src:font-url("glyphicons-regular.eot");
and so on

Answer 2

I was able to find a workaround. By not pre-compiling the fonts and copying the fonts to the public folder (since this is what bootstrap was looking for anyway). There is probably a better fix for this but this seems to work for the time being.