我正在使用fontawesome 3.2.1和bootstrap 3.0.0在我的rails 4.0.1项目中。所有我的资产都位于vendor/assets中。
问题是当我编译我的资产（生产环境）并在生产环境下运行服务器时，我的fontawesome只能在开发模式下工作。错误如下：
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如下：
$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中加载
@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;
}
字形图标被加载在bootstrap.min.css中
@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')}
--更新
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
font-path是最终使应用程序中的字体定义覆盖开始在生产环境中工作的技巧。 - David Krider