fontawesome + Rails 4.0.1无法正常工作

本文介绍了fontawesome + Rails 4.0.1无法正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

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.

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

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'

资产为

$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

我的application.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被加载为font-awesome.css中的

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加载为bootstrap.min.css中的

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

我确实尝试了几种解决方案，例如在'url'之前添加'font'或'assets'，但没有一个有效.

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

-更新

config/application.rb的内容

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)}pact

推荐答案

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

I solved the problem as specified below.

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

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)每当您要引用样式表中的字体时，都使用 font-path . IE. 使用Rails提供的方法来引用资产，而不是使用"src" 例如

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

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

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)在资产预编译期间，"font-path"或"asset-path"之类的助手会帮助您指向正确的资产. IE.如果您将其指定为

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

您可以"grep"并在"public/assets"中检出已编译的文件.

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

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

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

5)请在生产或登台环境文件中设置"config.assetspress = false"，并在prod/staging环境中本地运行该应用程序，以便检查视图以确保资产正在加载.

5) Please set 'config.assetspress = 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.

您可以结帐> github/joshsoftware/website/commit/859f2709180e9fb0aac595284d64b22 a>致力于获得更多理解.

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