Rails: Uso de Font Awesome

Mi diseñador web me ha proporcionado fonts e íconos actualizados que se han agregado a la fuente impresionante; lo colocó en una carpeta de fonts local. También me dieron un archivo font-awesome.css.

Copié la carpeta de fonts en mis activos directamente y puse font-awesome.css en assets / stylesheets.

El css se referencia correctamente en mi código, pero ninguno de los íconos de la carpeta de fonts se carga.

¿Hay algo que deba hacer para asegurar que todo se cargue correctamente y / o que se haga referencia a la carpeta de fonts?

primero: agregue aplicaciones / recursos / fonts a la ruta del activo (config / application.rb)

config.assets.paths << Rails.root.join("app", "assets", "fonts") 

luego mueve los archivos de fuente a / assets / fonts (crea la carpeta primero)

Ahora cambie el nombre de font-awesome.css a font-awesome.css.scss.erb y edítelo así: change:

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

a esto:

 @font-face { font-family: "FontAwesome"; src: url('<%= asset_path("fontawesome-webfont.eot") %>'); src: url('<%= asset_path("fontawesome-webfont.eot") + "?#iefix" %>') format('eot'), 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; } 

Finalmente: verifique que todos los recursos estén cargados correctamente (con Firebug o Chrome Inspector)

Ahora hay una manera más fácil, solo agrega gem "font-awesome-rails" a tu Gemfile y ejecuta la bundle install .

Luego, en su application.css, incluya el archivo css:

 /* *= require font-awesome */ 

Incluye la fuente impresionante en su canal de activos de forma automática. Hecho. Comience a usarlo 🙂

Para obtener más información, consulte la documentación de font-awesome-rails .

Ofrezco otra respuesta, en esta no tendrás que preocuparte por las gems o las rutas ni por ninguna de esas soluciones excesivas. Simplemente pegue esta línea en su application.html.erb (o en cualquier archivo que tenga su diseño)

  ...   

Además de la respuesta de Vicoar

Para Rails 4 tienes que cambiar el CSS ligeramente diferente. Tenga en cuenta el uso de font_url:

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

He probado vicoar, pero no funciona en mi proyecto basado en ruby ​​1.9.3 y carriles 3.2. Luego renombro el nombre de archivo font-awesome.css a font-awesome.css.erb y cambio el @font-face a este:

 @font-face { font-family: "FontAwesome"; src: url(<%= asset_path 'fontawesome-webfont.eot' %>); src: url(<%= asset_path 'fontawesome-webfont.eot' + '?#iefix' %>) format('eot'), 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; } 

Funciona muy bien y el código es muy simple … (puede consultar la guía asset_pipeline

Ahora, Seguir el camino es la forma más fácil de integrar Font Awesome con Rails:

SASS Ruby Gem

Utilice la fuente oficial de la gem impresionante Ruby SASS para obtener fácilmente Font Awesome SASS en un proyecto de Rails.

Agregue esta línea al Gemfile de su aplicación:

 gem 'font-awesome-sass' 

Y luego ejecuta:

 $ bundle 

Agregue esto a su Application.scss:

 @import "font-awesome-sprockets"; @import "font-awesome"; 

Para Rails 3.2. * Una solución rápida:

1) Ponga los archivos increíbles de fonts en una carpeta “fonts” en la carpeta pública 2) Abra font-awesome.css y cambie las 4 entradas para “../fonts” a “/ fonts” en la parte superior del archivo

 @font-face { font-family:'FontAwesome'; src:url('/fonts/fontawesome-webfont.eot?v=3.2.1'); src:url('/fonts/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'),url('/fonts/fontawesome-webfont.woff?v=3.2.1') format('woff'),url('/fonts/fontawesome-webfont.ttf?v=3.2.1') format('truetype'),url('../fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg'); font-weight:normal; font-style:normal; } [class^="icon-"],[class*=" icon-"] { font-family:FontAwesome; font-weight:normal; font-style:normal; text-decoration:inherit; -webkit-font-smoothing:antialiased; *margin-right:.3em; }