ruby-on-rails-4 - ttf - fontawesome webfont eot

fontawesome+rails 4.0.1 no funciona

Question

Estoy usando fontawesome 3.2.1 y bootstrap 3.0.0 en mi proyecto rails 4.0.1. Todos mis activos están ubicados en proveedores / activos.

el problema es que mi fontawesome está trabajando en modo de desarrollo cuando cuando compilo mis activos (env de producción) y ejecuto el servidor en entorno de producción, no puede cargar fontawesome. los errores son como

Started GET "/assets/fontawesome-webfont.svg" for 127.0.0.1 at 2014-01-08 11:48:55 +0530
ActionController::RoutingError (No route matches [GET] "/assets/fontawesome-webfont.svg"):
actionpack (4.0.1) lib/action_dispatch/middleware/debug_exceptions.rb:21:in `call''
actionpack (4.0.1) lib/action_dispatch/middleware/show_exceptions.rb:30:in `call''

los activos son como

$ls vendor/assets/
=> fonts images javascripts stylesheets
$ls vendor/assets/*
=> vendor/assets/fonts:
FontAwesome.otf fontawesome-webfont.ttf glyphicons-halflings- regular.svg
fontawesome-webfont.eot fontawesome-webfont.woff glyphicons-halflings- regular.ttf
fontawesome-webfont.svg glyphicons-halflings-regular.eot glyphicons-halflings-regular.woff
vendor/assets/images:
bg_direction_nav.png bxslider search-icon.jpg
vendor/assets/javascripts:
bootstrap bxslider fancybox others revolution_slider
vendor/assets/stylesheets:
bootstrap bxslider fancybox font_awesome others revolution_slider
$ls vendor/assets/stylesheets/bootstrap/
=> bootstrap.min.css
$ls vendor/assets/stylesheets/font_awesome/
=> font-awesome.css

mi application.css es como

$cat app/assets/stylesheets/application.css
/*
* This is a manifest file that''ll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You''re free to add application-wide styles to this file and they''ll appear at the top of the
* compiled file, but it''s generally better to create a new file per style scope.
*
*= require bootstrap/bootstrap.min.css
*= require others/theme.css
*= require others/bootstrap-reset.css
*= require font_awesome/font-awesome.css
*= require bxslider/jquery.bxslider.css
*= require fancybox/jquery.fancybox.css
*= require revolution_slider/rs-style.css
*= require revolution_slider/settings.css
*= require others/flexslider.css
*= require others/style.css
*= require others/style-responsive.css
*= require_self
*/

fontawesome se cargan en font-awesome.css como

@font-face {
font-family: ''FontAwesome'';
src: url(''/assets/fontawesome-webfont.eot?v=3.2.1'');
src: url(''/assets/fontawesome-webfont.eot?#iefix&v=3.2.1'') format(''embedded-opentype''), url(''/assets/fontawesome-webfont.woff?v=3.2.1'') format(''woff''), url(''/assets/fontawesome-webfont.ttf?v=3.2.1'') format(''truetype''), url(''/assets/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1'') format(''svg'');
font-weight: normal;
font-style: normal;
}

glyphicons se cargan en bootstrap.min.css como

@font-face{
font-family:''Glyphicons Halflings'';
src:url(''/assets/glyphicons-halflings-regular.eot'');
src:url(''/assets/glyphicons-halflings-regular.eot?#iefix'') format(''embedded-Opentype''), url(''/assets/glyphicons-halflings-regular.woff'') format(''woff''),url(''/assets/glyphicons-halflings-regular.ttf'') format(''truetype''),url(''/assets/glyphicons-halflings-regular.svg#glyphicons-halflingsregular'') format(''svg'')}

Intenté un par de soluciones como anteponer ''font'' o ''assets'' a ''url'' pero ninguna funcionó.

--ACTUALIZAR

contenido de config / application.rb

config.assets.enabled = true
config.assets.version = ''1.0''
config.assets.paths += ["#{config.root}/vendor/assets/fonts", "#config.root}/app/assets/images/**", "#{config.root}/vendor/assets/images"]
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif *.eot *.svg *.ttf *.otf *.woff vendor/assets/stylesheets/**/* vendor/assets/fonts/*)
["#{config.root}/vendor/assets/javascripts", "#config.root}/vendor/assets/stylesheets"].each do |d|
config.assets.precompile += Dir.glob("#{d}/*").map{|f| "#{f.gsub(d + ''/'', '''')}/**/*" if File.directory?(f)}.compact

Answer 1

Su svg no parece estar compilado, la huella dactilar parece desaparecer, excepto si establece:

config.assets.digest = false 

Estaba obteniendo el mismo "no hay coincidencia de rutas GET" después de la precompilación. Puedes intentar agregar el svg aquí en tu config / application.rb:

config.assets.precompile += %w(*.svg)

Y luego vuelva a intentar a:

rake assets:precompile RAILS_ENV=production

En mi caso, un simple recurso de rake: la precompilación no era suficiente, necesitaba especificar RAILS_ENV y RAILS_GROUPS (si la versión de los rieles es menor que 4).

Normalmente, los activos compilados se encuentran en el directorio público / de activos.

Espero que ayude

ACTUALIZAR:

Otra idea que surge de mi experiencia con ckeditor con rails 4 en producción. La compilación de activos con digest no está funcionando ( https://github.com/galetahub/ckeditor ). Debe agregar una tarea de rake que copie / modifique algunos archivos en el directorio público / de activos después de la compilación. Aquí está el código:

namespace :ckeditor do
desc ''Create nondigest versions of some ckeditor assets (e.g. moono skin png)''
task :create_nondigest_assets do
fingerprint = //-[0-9a-f]{32}/./
for file in Dir[''public/assets/ckeditor/contents-*.css'', ''public/assets/ckeditor/skins/moono/*.png'']
next unless file =~ fingerprint
nondigest = file.sub fingerprint, ''.'' # contents-0d8ffa186a00f5063461bc0ba0d96087.css => contents.css
FileUtils.cp file, nondigest, verbose: true
end
end
end
# auto run ckeditor:create_nondigest_assets after assets:precompile
Rake::Task[''assets:precompile''].enhance do
Rake::Task[''ckeditor:create_nondigest_assets''].invoke
end

Usted puede reemplazar fácilmente ckeditor con fontawsome.

Answer 2

Resolví el problema como se especifica a continuación.

1) En primer lugar, no refiera los activos dentro del archivo .css . Cambie el nombre del archivo a .css.scss . Esa es la misma extensión cada vez que creas el controlador y crea activos para ese controlador (javascript y css). Hay múltiples aplicaciones para convertir css a scss. Úselos si el CSS es grande.

2) use font-path cada vez que quiera referir una fuente dentro de una hoja de estilo. es decir. utilice los métodos provistos por los raíles para referirse a los activos en lugar de usar ''src'', por ejemplo

@font-face {
font-family: ''MuseoSans-700'';
src: url(font-path(''museoSans/244DD4_0_0.eot''));
src: url(font-path(''museoSans/244DD4_0_0.eot?#iefix'')) format(''embedded-opentype'');
src: url(font-path(''museoSans/244DD4_0_0.woff'')) format(''woff'');
src: url(font-path(''museoSans/244DD4_0_0.ttf'')) format(''truetype'');
}

En el código anterior, mi archivo es como "app / assets / stylesheets / fonts.scss" y mis fuentes se encuentran en

$ls vendor/assets/fonts/
fontawesome museoSans museoSans500
$ls vendor/assets/fonts/museoSans
244DD4_0_0.eot 244DD4_1_0.ttf 244DD4_2_0.woff 244DD4_4_0.eot 244DD4_5_0.ttf 244DD4_6_0.woff 244DD4_8_0.eot 244DD4_9_0.ttf
244DD4_0_0.ttf 244DD4_1_0.woff 244DD4_3_0.eot 244DD4_4_0.ttf 244DD4_5_0.woff 244DD4_7_0.eot 244DD4_8_0.ttf 244DD4_9_0.woff
244DD4_0_0.woff 244DD4_2_0.eot 244DD4_3_0.ttf 244DD4_4_0.woff 244DD4_6_0.eot 244DD4_7_0.ttf 244DD4_8_0.woff
244DD4_1_0.eot 244DD4_2_0.ttf 244DD4_3_0.woff 244DD4_5_0.eot 244DD4_6_0.ttf 244DD4_7_0.woff 244DD4_9_0.eot

3) Durante la precompilación de activos, los ayudantes como ''font-path'' o ''asset-path'' ayudan a señalar el activo correcto. es decir. si lo especificas como

src: url(''/assets/museoSans/244DD4_0_0.eot''));

esto seguirá siendo el mismo en el activo compilado. idealmente debería ser

src: url(''/assets/museoSans/244DD4_0_0-67652745236457645234dghfhsagfd64354.eot''));

Puede ''grep'' y verifique el archivo compilado en "public / assets".

4) otra forma de asegurarse de que los activos se están cargando es llamarlos desde la url.

5) Configure ''config.assets.compress = false'' en su archivo env de producción o en etapas y ejecute la aplicación localmente en prod / staging env para verificar las vistas y asegurarse de que los activos se están cargando.

Puede verificar https://github.com/joshsoftware/website/commit/859f2709180e9fb0aac59549d64bd4351a2842b3 para obtener más información.