Question

我在rails 3.2.13 app中使用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，页面上不会显示任何图标。

我通过gem访问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没有导入最新版本的字体真棒版本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

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

宝石“twitter-bootstrap-rails”已经包含了字体真棒，你不需要包含任何额外的宝石来获取图标。首先，您需要删除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”，因为拇指向上图标是宝石的最后一次更新（4天前他们添加了对font-awesome 3.2的支持0.1）。确保更新您的宝石。希望它有所帮助！

字体真棒 - 出错图标

2 个答案: