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

Flatulent

Did you look in your browser's development tools for a 404 that is probably happening when it tries to fetch the icon? Compare the expected location of the icon with the actual. – Silverware

in my js console i have GET http://mighty-brushlands-6367.herokuapp.com/assets/glyphicons-halflings.png 404 (Not Found) and i'm not sure how to fix that cause i have no idea where that file is located locally. – Flatulent

It might be time to configure the Rails Asset Pipeline on Heroku. – Silverware

Answer 1

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

Flatulent

+1, thanks. I didn't even need to manually restart heroku, it did so automatically. – Alemanni

I don't really understand why it has to be changed twice. But it does not work for me. – Fifty

@JVK can you then suggest a better solution? :) – Flatulent

Yes can anyone post a better solution please? – Parhelion

Just did (import bootstrap-sprockets before bootstrap in your scss file) :) – Catlaina

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

Catlaina

I am not using scss. How do I solve this if I am using just plain css? – Imponderabilia

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

Destructive

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

Evenhanded

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...

Afflictive

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.

Berne