讓字體在Rails 3.1中工作？

我不知道什麼是錯的。看來我正在做這件事。我正在嘗試在我的應用程序中使用Font Awesome，但字體未顯示。我有一個文件夾，名爲fonts在我application.rb包括行：讓字體在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文件（CHANGED見下文）（根本不需要IE7一）我只是把我的主要css的application.css。比我更改網址來檢測字體文件。

@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>

完整的答案

這是你可以得到它的字體真棒與正常插入它的工作。

引用自：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>

來源

2012-07-03 LearningRoR

請提供的EN樣本輪胎application.css文件 –

您需要添加** .erb **擴展來解析您的CSS文件中的eruby部分。不需要.scss。另外，您可以隨時訪問/assets/application.css，看看Rails如何輸出您的CSS數據 – yoavmatchulsky

'* = font-awesome'是錯誤的，我想。作爲一個測試，刪除它並在關閉'* /'之前添加'* = require_tree'。看看它是否有幫助。 – Zabba

你真的需要把這些代碼到一個css.scss文件，然後將其包含在application.css（您將需要css.scss使用asset_paths ）

更新：您將需要更改*= font-awesome到*= require font-awesome並重新命名font-awesome.css到font-awesome.css.scss

來源

2012-07-05 01:29:10

所以我必須使用SCSS？我不能使用常規的'css'文件？此外，我刪除了所有的Font-Awesome文件以重新啓動，現在我正在使用'font-awesome.css'普通文件，但是請注意，當我使用'* = require_self'將它包含在我的'application.css'中時，它不會顯示在我的頁面源代碼中。即它未被發現，這是唯一能做到這一點的文件。 – LearningRoR

我更新了上面的代碼。 – LearningRoR

好吧，到目前爲止這麼好，但最後一件事是我不明白我現在得到的這個錯誤：'...... awesome-webfont「後的無效CSS：預計」）「，是」.eot「）％ >'）;「' – LearningRoR

讓字體在Rails 3.1中工作？

回答

相關問題