Font Awesome - getting wrong icon

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!