ruby-on-rails - rails - libreria font awesome
Rails: Uso de Font Awesome (7)
Mi diseñador web me ha proporcionado fuentes e íconos actualizados que se han agregado a la fuente impresionante; lo colocó en una carpeta de fuentes local. También me dieron un archivo font-awesome.css.
Copié la carpeta de fuentes 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 fuentes se carga.
¿Hay algo que deba hacer para asegurar que todo se cargue correctamente y / o que se haga referencia a la carpeta de fuentes?
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;
}
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 .
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 gema 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";
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
Ofrezco otra respuesta, en esta no tendrás que preocuparte por las gemas 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)
<head>
...
<link href="//use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">
</head>
Para rieles 3.2. * Una solución rápida:
1) Ponga los archivos increíbles de fuentes 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;
}
primero: agregue aplicaciones / recursos / fuentes 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)