0

我在 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，所以问题可能是冲突吗？

谢谢史蒂夫

4

2 回答 2

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

应用程序.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";
于 2013-06-22T19:26:18.350 回答
0

我认为您的问题是因为您正在混合宝石！

gem "twitter-bootstrap-rails" 已经包含了很棒的字体，你不需要包含任何额外的 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

应用程序.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";

你的.html

<i class='icon-thumbs-up color-green'></i>

注意：你应该检查你有什么版本的“twitter-bootstrap-rails”，因为大拇指图标是在上次更新 gem 时出现的（4 天前，他们添加了对 font-awesome 3.2.1 的支持） . 确保更新您的宝石。希望能帮助到你！

于 2013-06-21T20:52:56.960 回答