글꼴 굉장 - 틀린 지름 아이콘

Question

난 레일 3.2.13 응용 프로그램에서 글꼴 굉장 사용하고 있습니다. 성공적으로 아이콘 - 검색 아이콘 쇼핑 카트 및 기타 아이콘을 앱에 추가했습니다. 그러나 아이콘 - 엄지 손가락 업 및 아이콘 엄지 손가락을 사용하려고 할 때 어떤 이유로 아이콘 엄지 손가락 또는 아이콘 엄지 손가락처럼 보입니다. 아이콘 엄지 손가락 높이를 사용해도 아이콘이 표시되지 않습니다.

나는 보석을 통해 부트 스트랩과 멋진 글꼴 모두 액세스 : 여기

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 젬을 모두 추가했기 때문에 문제가 될 수 있습니까?

감사 스티브

Answer 1

난 당신이 보석을 믹스 인 것 때문에 문제라고 생각합니다!

"twitter-bootstrap-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

Gemfile을 : 우선 당신은

파일은 다음과 같이한다, 보석 "글꼴 멋진 레일을"제거해야

*= 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> 

참고 : 당신은 확인해야합니다 당신이해야합니까 "트위터 - 부트 스트랩 레일"의 버전, 때문에 마지막 업데이트에 엄지 손가락 아이콘의 보석 (4 일 전 글꼴 - 굉장한 3.2.1에 대한 지원을 추가했을 때였습니다). 보석을 업데이트하십시오. 희망이 도움이됩니다!

Answer 2

twitter-bootstrap-rails gem이 최신 글꼴 버전 3.2.1을 가져 오지 않는 것 같아서 font-awesome-rails gem을 유지해야했습니다.

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 :하지만 3.2.1.1는

gemfile 지금과 같은, 가장 최신 버전으로 보석을 업데이트했다.SCS들 : 지금까지

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