2012-07-03 24 views
6

Tôi không biết có gì sai. Có vẻ như tôi đang làm điều này đúng. Tôi đang cố gắng sử dụng Font Awesome trong ứng dụng của mình nhưng phông chữ không xuất hiện. Tôi có một thư mục có tên fonts và trong tôi application.rb bao gồm các dòng:Bắt Fonts để làm việc trong 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") 

và hơn thay vì có các tập tin 2 css đi kèm với Font-tuyệt vời (THAY ĐỔI xem dưới đây) (không cần IE7 một) Tôi chỉ cần đặt css chính bên trong của tôi application.css. Hơn tôi thay đổi các url để phát hiện các tập tin phông chữ.

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

Tôi đã tắt máy chủ và khởi động lại sau mỗi lần thay đổi mã nhưng vẫn không tốt. Tôi đang thiếu gì?

UPDATE:

tôi không sử dụng Sass hoặc ít hơn. Có lẽ @font-face là vấn đề? Tôi chưa từng thấy loại mã này trước đây.

CẬP NHẬT

bây giờ tôi đang sử dụng tập tin font-awesome.css. Nhưng nó không hiển thị trong mã nguồn của tôi.

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

ĐẦY ĐỦ ĐÁP

Đây là cách bạn có thể lấy nó Font Tuyệt thật làm việc với chèn nó bình thường.

QUOTE từ: 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

vui lòng cung cấp một mẫu của các en file application.css tire –

+1

Bạn cần thêm phần mở rộng **. erb ** để phân tích cú pháp các phần bị xóa trong tệp CSS của bạn. không cần .scss. Ngoài ra, bạn luôn có thể truy cập /assets/application.css và xem cách Rails xuất dữ liệu CSS của bạn – yoavmatchulsky

+1

'* = font-awesome' là sai, tôi nghĩ vậy. Như một phép thử, loại bỏ nó và thêm '* = require_tree' ngay trước khi đóng' */'. Xem nếu nó giúp. – Zabba

Trả lời

4

Bạn thực sự cần phải đặt mã đó vào một tập tin css.scss sau đó bao gồm nó trong application.css (bạn sẽ cần css.scss sử dụng asset_paths)

UPDATE: bạn sẽ cần phải thay đổi *= font-awesome để *= require font-awesome và cũng đổi tên font-awesome.css-font-awesome.css.scss

+0

Vì vậy, tôi phải sử dụng SCSS? Tôi không thể sử dụng tệp 'css' thông thường? Ngoài ra, tôi đã xóa tất cả các tệp Font-Awesome để khởi động lại và bây giờ đang sử dụng tệp 'font-awesome.css' bình thường nhưng lưu ý rằng khi tôi đưa nó vào trong' application.css' của mình bằng '* = require_self' nó không hiển thị trong trang của tôi Mã nguồn. tức là không bị phát hiện, đây là tệp duy nhất thực hiện điều này. – LearningRoR

+0

Tôi đã cập nhật mã của mình ở trên. – LearningRoR

+0

OK, cho đến nay rất tốt nhưng điều cuối cùng là tôi không hiểu lỗi này tôi nhận được ngay bây giờ: 'CSS không hợp lệ sau" ... awesome-webfont ": expected") ", was" .eot ')% > '); "' – LearningRoR

Các vấn đề liên quan