字体真棒 - 弄错图标

Question

我在 rails 3.2.13 应用程序中使用 Font Awesome。我已成功将以下图标添加到应用程序中：icon-search icon-shopping-cart 等。但是由于某种原因，当我尝试使用 icon-thumbs-up 和 icon-thumbs-down 时，它们看起来像 icon-thumbs-up-alt 或 icon-thumbs-up-alt。如果我尝试使用 icon-thumbs-up-alt，页面上不会显示任何图标。

我通过 gems 访问 bootstrap 和 font awesome：

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-awesome-rails gems，问题可能是冲突吗？

谢谢 史蒂夫

Answer 1

似乎 twitter-bootstrap-rails gem 没有导入最新版本的 font awesome，版本 3.2.1，所以我不得不保留 font-awesome-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 和 font-awesome gems 之间发生冲突，我禁用了 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" 已经包含了 font-awesome，你不需要添加任何额外的 gem 来获取图标。首先你需要移除 gem "font-awesome-rails",

您的文件应如下所示：

宝石文件

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-awesome 3.2 的支持.1)。确保更新您的宝石。希望对您有所帮助！