twitter-bootstrap-rails: @iconSpritePath can't be resolved in production environment

Question

I just deployed my rails app to Heroku, and all my bootstrap icons that showed up fine in the development environment only showed up as little squares on Heroku. The same thing happens when I'm running the app in production mode on my local machine with precompiled assets. I am using Rails 3, the twitter-bootstrap-rails gem, and LESS.

After doing some digging I have discovered this:

The actual CSS for bootstrap is spread across a whole bunch of LESS files in the twitter-bootstrap-rails external library. sprites.less is the file where rules related to the icons are. There is a rule in there under [class^="icon-"], [class*=" icon-"] that sets the 'background-image' property 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 that I don't understand, this works fine in the dev environment, but when I precompile my assets and run it in the production environment, @iconSpritePath gets replaced with 'none' in the compiled CSS file, and therefore all the icons have a 'background-image' property of 'none'.

Has anyone else had this problem, and does anyone have any ideas about how to resolve it? I'm assuming I'll have to make some changes to the LESS files...

EDIT: I just discovered that the problem actually isn't the path to the icons. It's that during compilation, an extra rule gets added to the beginning of the CSS file that says:

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

This overwrites the 2nd rule for [class^="icon-"], [class*=" icon-"] in the file, which is the one that should be used:

[class^="icon-"], [class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
line-height: 14px;
vertical-align: text-top;
background-image: url("/assets/twitter/bootstrap/glyphicons-halflings-f6675c325532ec11a984d58e172b8e2a.png");
background-position: 14px 14px;
background-repeat: no-repeat;
margin-top: 1px;

Don't know why this is getting added...

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