Glyphicon works locally but not on Heroku

Question

If you look at my app here: http://quiet-brushlands-5712.herokuapp.com/, close to the button is an icon, a glyphicon. But it\'s not appearing on heroku. locally it show as nicel

Answer 1

Further to Vidya's comment, it's probably going to be your asset pipeline that's the problem

Although I'm not familiar with the specifics of Bootstrap for this, there is a major issue with Heroku's asset pipeline, being that it has to be precompiled before you can use it effectively

---

Asset Fingerprinting

Heroku requires you to precompile your assets because of asset fingerprinting

This is where your assets will have a hash applied to the end of their filename, like image-12sdafdsafkj223423jnjfadsnfsad.png or similar. The reason for this is apparently to keep the assets unique or something

If you follow the link provided by Vidya, you'll find that Heroku prompts to you precompile your assets using the Rails CMD. What it doesn't tell you is that this will mess up your images unless they've been dynamically-assigned

---

SCSS

As mentioned, I'm not sure about how this applies to Bootstrap specifically, but with Heroku's asset pipeline stuff, you need to ensure your images are assigned using dynamic paths

Like in Rails itself, SCSS allows you to use asset_path or image_path to create a dynamic link. This is what you have to do to fix your problem. Here's some code we use, which works on Heroku:

.navigation_bar {
        z-index: 200;
        position: relative;
        background: asset_url('nav_bar/bg.png') repeat-x top;
}