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 nicely like this:

I tried the "solution" from here Using boostrap.css file in Rails production/heroku w/o LESS or SASS and from other links in Google. I need the glyph to show on Heroku as well. Any help?

I didn't download the Twitter Bootstrap manually, I'm just using a gem. In my Javascript console I have this:

GET http://quiet-brushlands-5712.herokuapp.com/assets/glyphicons-halflings.png 404 (Not Found)

My Gemfile if it helps:

source 'https://rubygems.org'

gem 'rails', '4.0.2'
gem 'sass-rails', '~> 4.0.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'jquery-rails', '3.0.4'
gem 'turbolinks', '2.0.0'
gem 'jbuilder', '~> 1.2'
gem 'bootstrap-sass', '2.1'
gem 'jquery-ui-rails', '4.1.0'
gem 'pg'
gem 'font-awesome-rails', '4.0.3.0'

group :doc do
  # bundle exec rake doc:rails generates the API under doc/api.
  gem 'sdoc', require: false
end

group :development, :test do
  gem 'rspec-rails', '2.11.0'
  gem 'guard-rspec', '1.2.1'
  gem 'guard-spork', '1.2.0'
  gem 'childprocess', '0.3.6'
  gem 'spork', '0.9.2'
end

group :production do
  gem 'rails_12factor'
end

Answer 1

The solution was to change config.assets.compile = false to config.assets.compile = true in the config/environments/production.rb file.

Answer 2

Solution that not use the compilation fallback (tested on Rails 4.1): In your scss files, import bootstrap-sprockets just before bootstrap.

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

Answer 3

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;
}

Answer 4

If you do not want to set your config.assets.compile to true in your production environment (which you probably shouldn't for better performance), you can manually precompile your assets before you push to heroku using rake assets:precompile RAILS_ENV=production

Answer 5

In config/environments/production.rb

Change config.assets.compile = false to config.assets.compile = true

(and then don't forget to commit and push to heroku)

Worked for me...

Answer 6

Because I came to this answer when I was searching I figure I should put here that the solution I came across was to include an import to "bootstrap-sprockets" before bootstrap. This is documented at https://github.com/twbs/bootstrap-sass/issues/653.

I realize the question isn't using bootstrap-sass 3.2+ but I figure this may help someone.