fontawesome + rails 4.0.1 不工作 [英] fontawesome + rails 4.0.1 not working

问题描述

我在 rails 4.0.1 项目中使用 fontawesome 3.2.1 和 bootstrap 3.0.0.我所有的资产都位于供应商/资产中.

问题是当我编译我的资产(生产环境)并在生产环境中运行服务器时，我的 fontawesome 正在开发模式下工作，它无法加载 fontawesome.错误是

在 2014-01-08 11:48:55 +0530 开始 GET "/assets/fontawesome-webfont.svg" for 127.0.0.1ActionController::RoutingError(没有路由匹配 [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'

资产如下

$ls 供应商/资产/=>字体 图像 javascripts 样式表$ls 供应商/资产/*=>供应商/资产/字体:FontAwesome.otf fontawesome-webfont.ttf glyphicons-halflings-regular.svgfontawesome-webfont.eot fontawesome-webfont.woff glyphicons-halflings-regular.ttffontawesome-webfont.svg glyphicons-halflings-regular.eot glyphicons-halflings-regular.woff供应商/资产/图像:bg_direction_nav.png bxslider search-icon.jpg供应商/资产/javascripts:bootstrap bxsliderfancybox 其他revolution_slider供应商/资产/样式表:bootstrap bxsliderfancybox font_awesome othersvolution_slider$ls 供应商/资产/样式表/引导程序/=>bootstrap.min.css$ls 供应商/资产/样式表/font_awesome/=>font-awesome.css

我的 application.css 是这样的

$cat app/assets/stylesheets/application.css/** 这是一个清单文件，将被编译成 application.css，其中将包含所有文件* 下面列出.** 此目录中的任何 CSS 和 SCSS 文件，lib/assets/stylesheets，vendor/assets/stylesheets，* 或插件的供应商/资产/样式表，如果有的话，可以使用相对路径在此处引用.** 您可以自由地向该文件添加应用程序范围的样式，它们将出现在* 编译文件，但通常最好为每个样式范围创建一个新文件.**= 需要引导程序/bootstrap.min.css*= 需要其他人/theme.css*= 需要其他人/bootstrap-reset.css*= 需要 font_awesome/font-awesome.css*= 需要 bxslider/jquery.bxslider.css*= 需要fancybox/jquery.fancybox.css*= 需要revolution_slider/rs-style.css*= 需要revolution_slider/settings.css*= 需要其他人/flexslider.css*= 需要其他人/style.css*= 需要其他人/style-responsive.css*= require_self*/

fontawesome 在 font-awesome.css 中加载为

@font-face {字体系列:'FontAwesome';src: url('/assets/fontawesome-webfont.eot?v=3.2.1')​​;src: url('/assets/fontawesome-webfont.eot?#iefix&v=3.2.1')​​ 格式('embedded-opentype'), url('/assets/fontawesome-webfont.woff?v=3.2.1') 格式('woff'), url('/assets/fontawesome-webfont.ttf?v=3.2.1')​​ 格式('truetype'), url('/assets/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1')​​ 格式('svg');字体粗细:正常；字体样式:正常；}

字形在 bootstrap.min.css 中加载为

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

我确实尝试了几种解决方案，例如将字体"或资产"添加到网址"，但都没有奏效.

--更新

config/application.rb 的内容

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

解决方案

我解决了下面指定的问题.

1) 首先，不要引用 .css 文件中的资源.将文件重命名为 .css.scss.每当您创建控制器并为该控制器创建资产时，这都是相同的扩展名.(javascript 和 css).有多种应用程序可以将 css 转换为 scss.如果 css 很大，请使用它们.

2) 当您想在样式表中引用字体时，请使用 font-path.IE.使用 rails 提供的方法来引用资产而不是使用 'src'例如

@font-face {字体系列:'MuseoSans-700';src: url(font-path('museoSans/244DD4_0_0.eot'));src: url(font-path('museoSans/244DD4_0_0.eot?#iefix')) 格式('embedded-opentype');src: url(font-path('museoSans/244DD4_0_0.woff')) 格式('woff');src: url(font-path('museoSans/244DD4_0_0.ttf')) 格式('truetype');}

在上面的代码中，我的文件是app/assets/stylesheets/fonts.scss"，我的字体位于

$ls vendor/assets/fonts/fontawesome museoSans museoSans500$ls 供应商/资产/字体/museoSans244DD4_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 940.DD4_0.eot244DD4_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 944_DD4_0.ttf244DD4_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.woff244DD4_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) 在资产预编译期间，像 'font-path' 或 'asset-path' 这样的助手帮助指向正确的资产.IE.如果你把它指定为

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

这在编译的资产中仍然是相同的.理想情况下应该是

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

您可以'grep'并在public/assets"中查看编译后的文件.

4) 另一种确保资产正在加载的方法是从 url 调用它们.

5) 请在您的生产或暂存环境文件中设置config.assets.compress = false"，并在生产/暂存环境中本地运行应用程序，以便检查视图以确保资产正在加载.

您可以查看https://github.com/joshsoftware/website/commit/8954b4a2a2aac59549d63a> 承诺更多理解.

I am using fontawesome 3.2.1 and bootstrap 3.0.0 in my rails 4.0.1 project. All my assets are located in vendor/assets.

the problem is that my fontawesome is working in development mode when when i compile my assets(production env) and run the server in production env, its not able to load fontawesome. the errors are as

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'

the assets are as

$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

my application.css is as

$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 are loaded in font-awesome.css as

@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 are loaded in bootstrap.min.css as

@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')}

i did try couple of solution like prepending 'font' or 'assets' to 'url' but none worked.

--UPDATE

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

解决方案

I solved the problem as specified below.

1) Firstly, dont refer assets inside .css file. Rename the file to .css.scss. Thats the same extension whenever u create controller and it creates assets for that controller.(javascript and css). There are multiple applications to convert css to scss. Use them if the css is large.

2) use font-path whenever you want to refer a font inside a stylesheet. ie. use methods provided by rails to refer to assets rather than using 'src' eg

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

In the above code, my file is as "app/assets/stylesheets/fonts.scss" and my fonts are located in

$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) During asset precompilation, the helpers like 'font-path' or 'asset-path' help in pointing to the right asset. ie. if u specify it as

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

this is still going to be the same in the compiled asset. it should ideally be

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

You can 'grep' and check out the compiled file in "public/assets".

4) another way of making sure the assets are loading is the to call them from url.

5) Please set 'config.assets.compress = false' in your production or staging env file and run the application locally in prod/staging env so as the check the views to make sure that the assets are loading.

You can checkout https://github.com/joshsoftware/website/commit/859f2709180e9fb0aac59549d64bd4351a2842b3 commit for more understanding.

这篇关于fontawesome + rails 4.0.1 不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！