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 en

Answer 1

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 2

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