2012-07-03 4 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ファイルを持つよりも、(がBELOWを参照してくださいCHANGED):私は、フォルダがfontsと呼ばれるにapplication.rb行を含め、私の持っています1)私はちょうど私のapplication.cssの内部のメインの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あるいはLESSを使用していませんよ。たぶん@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 ANSWER

これは、あなたが正常にそれを挿入して作業し、それはフォント-恐ろしい得ることができる方法です。あなたは本当に(あなたがasset_pathsを使用するcss.scssが必要になりますapplication.cssに含め、その後css.scssファイルにそのコードを配置する必要があり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ファイル内のエラビ部分を解析するには、**。erb **拡張子を追加する必要があります。しかし、.scssの必要はありません。また、いつでも/assets/application.cssに行き、RailsがあなたのCSSデータを出力する方法を見ることができます – yoavmatchulsky

+1

'* = font-awesome'は間違っています。テストとして、それを削除し、 '*/require_tree'を' */'の直前に追加してください。それが役立つかどうかを見てください。 – Zabba

答えて

4

:から

QUOTE

UPDATE:

+0

私はSCSSを使用する必要がありますか?私は普通の 'css'ファイルを使うことができませんか?また、すべてのFont-Awesomeファイルを削除して再起動し、 'font-awesome.css'通常ファイルを使用していますが、' application_ssy'の '* = require_self'私のページのソースコードには表示されません。すなわち、その検出されない、これはこれを行う唯一のファイルです。 – LearningRoR

+0

上記のコードを更新しました。 – LearningRoR

+0

OK、これまでのところ良いですが、最後のことは私がこのエラーを理解していないことです: '' awesome-webfont ":予期した") "、" .eot ' > '); "' – LearningRoR

関連する問題