2012-07-03 2 views
6

나는 무엇이 잘못되었는지를 모른다. 이 일을 제대로하고있는 것처럼 보입니다. 내 응용 프로그램에서 Font Awesome을 사용하려고하는데 글꼴이 나타나지 않습니다. 합니다 (IE7 필요하지 않았다Rails 3.1에서 작동하는 글꼴 가져 오기?

class Application < Rails::Application 
# Enable the asset pipeline 
config.assets.enabled = true 
# This line 
config.assets.paths << Rails.root.join("app", "assets", "fonts") 

대신 폰트 - 최고와 함께 제공되는 2 CSS 파일을 갖는 것보다 (는 아래를 참조 변경됨) : 나는 폴더가 fonts에게 전화에 application.rb 선을 포함 내이 하나) 난 그냥 내의 주요 CSS를 넣어. 글꼴 파일을 검색 할 URL을 변경합니다.

@font-face { 
    font-family: "FontAwesome"; 
    src: url('<%= asset_path('fontawesome-webfont.eot') %>'); 
    src: url('<%= asset_path('fontawesome-webfont.woff') %>') format('woff'), 
    url('<%= asset_path('fontawesome-webfont.ttf') %>') format('truetype'), 
    url('<%= asset_path('fontawesome-webfont.svg#FontAwesome') %>') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

코드를 변경할 때마다 서버를 껐다가 다시 시작했지만 여전히 좋지 않습니다. 내가 뭘 놓치고 있니?

UPDATE :

나는 SASS 이하를 사용하지 않는. 어쩌면 @font-face이 문제일까요? 전에 이런 유형의 코드를 사용하는 것을 본 적이 없습니다.

UPDATE

나는 이제 글꼴 awesome.css 파일을 사용하고 있습니다. 그러나 그것은 내 소스 코드에 나타나지 않습니다.

<head> 
    <link href="/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon"> 
    <link href="/assets/application.css?body=1" media="screen" rel="stylesheet" type="text/css"> 
    <link href="/assets/chosen.css?body=1" media="screen" rel="stylesheet" type="text/css"> 
    <script src="/assets/jquery.js?body=1" type="text/javascript"></script><style type="text/css"></style> 
    <script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script> 
    <script src="/assets/application.js?body=1" type="text/javascript"></script> 
    <script src="/assets/chosen.jquery.min.js?body=1" type="text/javascript"></script> 
</head> 

FULL 답

이것은 당신이 글꼴 최고 정상적으로 삽입 작업을 얻을 수있는 방법이다.

인용 : https://gist.github.com/2251151

1. Download font-awesome from https://github.com/FortAwesome/Font-Awesome 

2. Put the font folder font folder in the app/assets. I renamed the folder from font to fonts to make it clearer 

3. Add config.assets.paths << "#{Rails.root}/app/assets/fonts" to config/application.rb. This is to include the apps/assets/fonts folder in the asset pipeline 

4. Put the font-awesome.css file in the app/assets/stylesheets folder 

5. The first part of the css should be: 

@font-face { 
    font-family: 'FontAwesome'; 
    src: url('fontawesome-webfont.eot'); 
    src: url('fontawesome-webfont.eot?#iefix') format('embedded-opentype'), 
     url('fontawesome-webfont.woff') format('woff'), 
     url('fontawesome-webfont.ttf') format('truetype'), 
     url('fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'), 
     url('fontawesome-webfont.svg#FontAwesomeRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

#--------------------------------------------------------------------------------------------- 

You should then be able to use: 

<div style="font-size: 24px;"> 
    <i class="icon-camera-retro"></i> icon-camera-retro 
</div> 
+0

는 EN의 샘플을 제공하십시오 font-awesome.cssfont-awesome.css.scss에 당신은 당신의 *= font-awesome*= require font-awesome로 변경하며 이름을 변경해야합니다 타이어 application.css 파일 –

+1

CSS 파일에서 eruby 부분을 구문 분석하려면 **. erb ** 확장자를 추가해야합니다. 그래도 .scss 필요는 없습니다. 또한 /assets/application.css에 가서 Rails가 CSS 데이터를 어떻게 출력하는지 볼 수 있습니다. – yoavmatchulsky

+1

'* = font-awesome'은 틀렸다고 생각합니다. 테스트로서 그것을 제거하고 닫는'* /'바로 전에'* = require_tree'를 추가하십시오. 도움이되는지 확인하십시오. – Zabba

답변

4
당신은 정말 css.scss 파일에 그 코드를 삽입 할 필요가

는 다음 application.css에 포함 (당신은 asset_paths를 사용하도록 css.scss가 필요합니다)

UPDATE :

+0

그래서 SCSS를 사용해야합니까? 일반'css' 파일을 사용할 수 없습니까? 또한, 모든 글꼴 - 굉장한 파일을 다시 시작하고 지금은'font-awesome.css' 일반 파일을 사용하고 있습니다. 그러나'* = require_self'를 사용하여 그것을'application.css' 안에 넣을 때주의하지 않아도됩니다. 내 페이지 소스 코드에 표시되지 않습니다. 즉,이 파일이 탐지되지 않는 경우에만이 작업을 수행하는 유일한 파일입니다. – LearningRoR

+0

위 코드를 업데이트했습니다. – LearningRoR

+0

OK, 지금까지는 좋았지 만 마지막으로 나는이 오류를 이해할 수 없다. 지금은 '잘못된 CSS가 ... "... awesome-webfont": expected ")", ".eot') % > '); "' – LearningRoR

관련 문제