Twitter-bootstrap-rails on Heroku: Glyphics display as squares

Question

I have deployed the rails application on Heroku and I am using gitter for twitter-bootstrap-rails to enable twitter bootstrap. Everything works fine in place (and in the development environment), but on Heroku (and in production) everything works fine, except for glyphics, which all appear as small squares.

At first I thought the problem was that the sprites were not precompiled, so in my gemfile I moved the line “gem twitter-bootstrap-rails” from the asset group and I was sure to recompile all of mine before loading into Heroku

However, this did not solve the problem. After checking the page, the icons appear to be available, but the CSS property that refers to them is overwritten by another CSS rule that sets the background image to none. This seems to be happening in the stylesheet, which is part of twitter bootstrap, so I'm not quite sure why this is happening.

Has anyone else had this problem?

Answer 1

Fixed. CSS that caused 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 problem was that the Fontawesome icon files were not precompiled, because these are unusual file types. I went into the production.rb environment file and added ".woff", ".eot", ".svg", ".ttf" to the config.assets.precompile list. Then I recompiled my assets and icons appeared! Boom.

Answer 2

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

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

I also have the following line in the Gemfile , without the github path :

 gem 'twitter-bootstrap-rails' 

With this configuration, the Glyphicons displayed well on Heroku.

Answer 3

Make these changes to the bootstrap.css file:

somewhere around line 1174:

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

and somewhere near line 1183:

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

I think it will be a trick.