4

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?

Andrew
  • 2,425
  • 2
  • 24
  • 35
  • 1
    Not a solution, but if you continue to have issues, have a look at [Font Awesome](http://fortawesome.github.com/Font-Awesome/) icons. I've used them without issue in dev and on an asset-precompiled Heroku deployment. – Paul Fioravanti Sep 18 '12 at 12:34

3 Answers3

7

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.

Andrew
  • 2,425
  • 2
  • 24
  • 35
4

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.

Stepan Zakharov
  • 420
  • 6
  • 11
-1

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.

jakeonrails
  • 1,885
  • 15
  • 37
  • This didn't work, because I'm using LESS, not the static bootstrap.css. The problem seems to be this: the bootstrap CSS is spread across a whole bunch of LESS files, and sprites.less is the one where rules related to icons are. There is a rule in there under [class^="icon-"],[class*=" icon-"] that sets background-image to iconSpritePath. iconSpritePath is defined in my bootstrap_and_overrides.css.less file as being asset-path('twitter/bootstrap/glyphicons-halflings.png'). For some reason, this works fine in the dev, but in production, the path gets set to 'none' in the compiled css file. – Andrew Oct 05 '12 at 06:01