twitter-bootstrap-rails on Heroku: Glyphicons displayed as squares

Question

I have deployed a rails app on Heroku, and I am using the twitter-bootstrap-rails gem to include twitter bootstrap. Everything works perfectly locally (and in the development environment), but on Heroku (and in production) everything works fine except for the glyphicons, which all display as little squares.

At first I thought this was a problem with the icon sprites not being precompiled, so in my gemfile, I moved the line 'gem twitter-bootstrap-rails' out of the assets group, and I was sure to precompile all my assets before uploading to Heroku.

However, this did not solve the problem. After inspecting the page, it seems as though the icons are available, but the CSS property that links to them is being overwritten by another CSS rule that sets background-image to none. It seems to be happening in a stylesheet that is part of twitter bootstrap, so I'm not quite sure why this is happening.

Has anyone else had this problem?

Answer 1

Fixed it. The CSS that was causing the problem:

[class^="icon-"], [class*=" icon-"] {
display: inline;
width: auto;
height: auto;
line-height: inherit;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;

was part of Fontawesome, which is included by default in twitter-bootstrap-rails. The issue was that the Fontawesome icon files were not being precompiled, because they are unusual filetypes. I went into the production.rb environment file, and added '.woff', '.eot', '.svg', '.ttf' to the config.assets.precompile list. I then re-compiled my assets, and the icons showed up! Boom.

Answer 2

I solved this problem by adding to config/environments/production.rb:

config.assets.precompile += %w( '.woff', '.eot', '.svg', '.ttf' )

Also I have next string in Gemfile, without github path:

gem 'twitter-bootstrap-rails'

With this configuration Glyphicons displayed well on Heroku.

Answer 3

Make these changes in your bootstrap.css file:

somewhere around line 1174:

-  background-image: url("../img/glyphicons-halflings.png");
+  background-image: image-url("glyphicons-halflings.png");

and somewhere around line 1183:

-  background-image: url("../img/glyphicons-halflings-white.png");
+  background-image: image-url("glyphicons-halflings-white.png");

I think that'll do the trick.