Font Awesome - getting wrong icon - ruby-on-rails

Question

I am using Font Awesome in a rails 3.2.13 app. I have successfull added the following icons to the app: icon-search icon-shopping-cart and others. But for some reason when I try to use icon-thumbs-up and icon-thumbs-down they look like icon-thumbs-up-alt or icon-thumbs-up-alt. If I try and use icon-thumbs-up-alt, no icon shows on the page.
I access both bootstrap and font awesome via gems:
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'therubyracer'
gem 'font-awesome-rails'
gem 'jquery-ui-rails'
gem 'less-rails'
gem 'twitter-bootstrap-rails'
gem 'uglifier', '>= 1.0.3'
end
Here is the application.css.scss file:
*= require bootstrap_and_overrides
*= require_self
*= require_tree .
#import "font-awesome";
.icon-thumbs-up {
color: green;
}
.icon-thumbs-down {
color: red;
}
Here is the bootstrap_and_overrides.css.less
#import "twitter/bootstrap/bootstrap";
body { padding-top: 50px; }
#import "twitter/bootstrap/responsive";
// Set the correct sprite paths
#iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings");
#iconWhiteSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings-white");
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
// Note: If you use asset_path() here, your compiled boostrap_and_overrides.css will not
// have the proper paths. So for now we use the absolute path.
#fontAwesomeEotPath: asset-path("fontawesome-webfont.eot");
#fontAwesomeWoffPath: asset-path("fontawesome-webfont.woff");
#fontAwesomeTtfPath: asset-path("fontawesome-webfont.ttf");
#fontAwesomeSvgPath: asset-path("fontawesome-webfont.svg");
// Font Awesome
#import "fontawesome";
Here is the button using the icons:
<%= link_to (content_tag(:i, "", :class=>"icon-thumbs-up")) + (content_tag(:i, "", :class=>"icon-thumbs-down")) + " Review", root_path , :class => "btn" %>
Could the issue be a conflict because I added both the twitter-bootstrap-rails and font-awesome-rails gems?
Thanks
Steve

Answer 1

It seems like the twitter-bootstrap-rails gem isn't importing the most recent version of font awesome, version 3.2.1 so I had to keep the font-awesome-rails gem. But I did update the gem to the most recent version, 3.2.1.1
The gemfile now looks like:
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'therubyracer'
gem 'jquery-ui-rails'
gem 'less-rails'
gem "twitter-bootstrap-rails"
gem "font-awesome-rails"
gem 'uglifier', '>= 1.0.3'
end
The application.css.scss:
*= require bootstrap_and_overrides
*= require_self
*= require_tree .
*/
#import "font-awesome";
To avoid the chance of conflict between the twitter-bootstrap-rails and font-awesome gems I disabled the defaults that come with twitter-bootstrap-rails:
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
// Note: If you use asset_path() here, your compiled boostrap_and_overrides.css will not
// have the proper paths. So for now we use the absolute path.
//#fontAwesomeEotPath: asset-path("fontawesome-webfont.eot");
//#fontAwesomeWoffPath: asset-path("fontawesome-webfont.woff");
//#fontAwesomeTtfPath: asset-path("fontawesome-webfont.ttf");
//#fontAwesomeSvgPath: asset-path("fontawesome-webfont.svg");
// Font Awesome
//#import "fontawesome";

Answer 2

I think you problem is because you're mixin gems!
The gem "twitter-bootstrap-rails" already include font-awesome you dont need to include any extra gem's for getting the icons. First of all you need to remove the gem "font-awesome-rails",
Your files should look like this:
Gemfile
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'therubyracer'
gem 'jquery-ui-rails'
gem 'less-rails'
gem 'twitter-bootstrap-rails'
gem 'uglifier', '>= 1.0.3'
end
application.css.scss
*= require bootstrap_and_overrides
*= require_self
*= require_tree .
.color-green {
color: green;
}
.color-red {
color: red;
}
bootstrap_and_overrides.css.less
#import "twitter/bootstrap/bootstrap";
body { padding-top: 50px; }
#import "twitter/bootstrap/responsive";
// Set the correct sprite paths
#iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings");
#iconWhiteSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings-white");
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
// Note: If you use asset_path() here, your compiled boostrap_and_overrides.css will not
// have the proper paths. So for now we use the absolute path.
#fontAwesomeEotPath: asset-path("fontawesome-webfont.eot");
#fontAwesomeWoffPath: asset-path("fontawesome-webfont.woff");
#fontAwesomeTtfPath: asset-path("fontawesome-webfont.ttf");
#fontAwesomeSvgPath: asset-path("fontawesome-webfont.svg");
// Font Awesome
#import "fontawesome";
Your.html
<i class='icon-thumbs-up color-green'></i>
Note: Your should check what version of "twitter-bootstrap-rails" do you have, because the thumb up icon its on the last update of the gem (It was 4 days ago when they add support for font-awesome 3.2.1). Make sure to update your gem. Hope it helps!