Font Awesome -获取错误图标

Question

我正在使用rails 3.2.13应用程序中的Font Awesome。我已经成功地添加了以下图标到应用程序:图标-搜索图标-购物车和其他。但是由于某些原因，当我尝试使用icon-thumbs up和icon-thumbs down时，它们看起来像icon-thumbs up-alt或icon-thumbs up-alt。如果我尝试使用icon -thumbs up-alt，页面上没有显示任何图标。

我通过gem同时访问bootstrap和font and：

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

下面是application.css.scss文件：

 *= require bootstrap_and_overrides
 *= require_self
 *= require_tree .

@import "font-awesome";

.icon-thumbs-up {
    color: green;
}

.icon-thumbs-down {
    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";

下面是使用图标的按钮：

 <%= link_to (content_tag(:i, "", :class=>"icon-thumbs-up")) + (content_tag(:i, "", :class=>"icon-thumbs-down")) + " Review", root_path , :class => "btn" %>

这个问题会不会是一个冲突，因为我同时添加了twitter-bootstrap-rails和font- added rails两个gem？

谢谢史蒂夫

Answer 1

看起来twitter-bootstrap-rails gem没有导入最新版本的font twitter，版本3.2.1，所以我不得不保留font- keep rails gem。但我确实将gem更新到了最新版本3.2.1.1

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 "font-awesome-rails"
  gem 'uglifier', '>= 1.0.3'
end

application.css.scss：

 *= require bootstrap_and_overrides
 *= require_self
 *= require_tree .
 */

@import "font-awesome";

为了避免twitter-bootstrap-rails和字体令人敬畏的gem之间的冲突，我禁用了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

我认为你的问题是因为你在混入宝石！

gem "twitter-bootstrap-rails“已经包含了非常棒的字体，你不需要包含任何额外的gem来获取图标。首先，您需要删除gem“font-awesome rails”，

您的文件应如下所示：

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>

注意:你应该检查一下你有什么版本的"twitter-bootstrap-rails“，因为竖起大拇指的图标是在gem的最后一次更新上(4天前他们添加了对font-awaw3.2.1的支持)。一定要更新你的gem。希望它能帮上忙！