字體真棒 - 越來越錯了圖標

Question

我在使用字體真棒在軌3.2.13應用程序。我已成功將以下圖標添加到應用程序中：圖標搜索圖標購物車等。但由於某種原因，當我嘗試使用圖標大拇指和圖標大拇指向下時，它們看起來像是圖標大拇指或圖標大拇指向上。如果我嘗試使用icon-thumb-up-alt，則頁面上不會顯示任何圖標。

我通過寶石訪問兩個引導和字體真棒：

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

我覺得你的問題是因爲你的mixin的寶石！

寶石「twitter-bootstrap-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的引導護欄」的版本，因爲它在上次更新的拇指圖標寶石（4天前，他們添加了對字體真棒3.2.1的支持）。確保更新你的寶石。希望能幫助到你！

Answer 2

似乎twitter-bootstrap-rails gem沒有導入最新版本的字體真棒版本3.2.1，所以我不得不保留font-awesome-rails 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的引導護欄和字體真棒寶石我禁用了附帶Twitter的引導護欄默認值之間的衝突的機會：

// 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";