2012-07-03 22 views
6

No sé lo que está mal. Parece que estoy haciendo esto bien. Intento usar Font Awesome en mi aplicación pero la fuente no aparece. Tengo una carpeta llamada fonts y en mi application.rb incluyó la línea:Obtención de fuentes para trabajar en 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") 

y que en lugar de tener los archivos CSS 2 que vienen con Font-impresionante (CAMBIAR VER ABAJO) (no necesitamos el IE7 uno) Acabo de poner el CSS principal dentro de mi application.css. Luego cambio las URL para detectar los archivos de fuentes.

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

Apagué el servidor y lo reinicié después de cada cambio en el código, pero todavía no está bien. ¿Qué me estoy perdiendo?

ACTUALIZACIÓN:

no estoy usando SASS o menos. Tal vez el @font-face es el problema? Nunca había visto este tipo de código antes.

ACTUALIZACIÓN

ahora estoy usando el archivo de fuente-awesome.css. Pero no aparece en mi código fuente.

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

respuesta completa

Así es como se puede conseguir Font-impresionante trabajar con insertarlo normalmente.

CITA de: 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

, facilite una muestra de la linea neumático application.css archivo –

+1

Necesita agregar la extensión **. erb ** para analizar las partes eruby en su archivo CSS. sin necesidad de .scss sin embargo. Además, siempre puedes ir a /assets/application.css y ver cómo Rails genera tus datos de CSS – yoavmatchulsky

+1

'* = font-awesome' está equivocado, creo. Como prueba, elimine eso y agregue '* = require_tree' justo antes del cierre' */'. Ve si ayuda. – Zabba

Respuesta

4

Usted realmente necesita para poner ese código en un archivo css.scss luego incluirla en el application.css (necesitará el css.scss utilizar los asset_paths)

ACTUALIZACIÓN: Usted tendrá que cambiar su *= font-awesome a *= require font-awesome y también cambiar el nombre de font-awesome.css a font-awesome.css.scss

+0

Entonces, ¿tengo que usar SCSS? No puedo usar el archivo 'css' normal? Además, eliminé todos los archivos Font-Awesome para reiniciar y ahora estoy usando el archivo normal 'font-awesome.css', pero nótese que cuando lo incluyo dentro de mi' application.css' con '' = require_self' no aparece en mis páginas Código fuente. es decir, no detectado, este es el único archivo que hace esto. – LearningRoR

+0

Actualicé mi código arriba. – LearningRoR

+0

OK, hasta ahora todo bien pero lo último es que no entiendo este error que estoy recibiendo ahora: 'CSS inválido después de" ... awesome-webfont ": expected") ", was" .eot ')% > '); "' – LearningRoR