ruby没有加载font-awesome

我正在尝试将font-awesome加载到我的视图中

我已经阅读了其他答案并实现了Rails:使用Font Awesome

我做了什么

配置/ application.rb中

require File.expand_path('../boot', __FILE__) require 'rails/all' # Require the gems listed in Gemfile, including any gems # you've limited to :test, :development, or :production. Bundler.require(:default, Rails.env) module Blog class Application < Rails::Application # Settings in config/environments/* take precedence over those specified here. # Application configuration should go into files in config/initializers # -- all .rb files in that directory are automatically loaded. # Set Time.zone default to the specified zone and make Active Record auto-convert to this zone. # Run "rake -D time" for a list of tasks for finding time zone names. Default is UTC. # config.time_zone = 'Central Time (US & Canada)' # The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded. # config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s] # config.i18n.default_locale = :de config.assets.paths << Rails.root.join("app", "assets", "fonts") end end 

我已将font-awesome.min.css重命名为font-awesome.min.css.erb并使用assets_path

 @font-face{font-family:'FontAwesome'; src:url(''); src:url('') format('embedded-opentype'), url('') format('woff'), url('') format('truetype'), url('') format('svg'); font-weight:normal;font-style:normal} 

并在视图上加载css文件

      

在Chrome上,未加载字体文件

在服务器上我得到

 Started GET "/fontawesome-webfont.ttf?v=4.0.3" for 127.0.0.1 at 2014-02-14 08:36:37 +0200 ActionController::RoutingError (No route matches [GET] "/fontawesome-webfont.ttf"): actionpack (4.0.2) lib/action_dispatch/middleware/debug_exceptions.rb:21:in `call' actionpack (4.0.2) lib/action_dispatch/middleware/show_exceptions.rb:30:in `call' railties (4.0.2) lib/rails/rack/logger.rb:38:in `call_app' railties (4.0.2) lib/rails/rack/logger.rb:20:in `block in call' activesupport (4.0.2) lib/active_support/tagged_logging.rb:67:in `block in tagged' activesupport (4.0.2) lib/active_support/tagged_logging.rb:25:in `tagged' activesupport (4.0.2) lib/active_support/tagged_logging.rb:67:in `tagged' railties (4.0.2) lib/rails/rack/logger.rb:20:in `call' actionpack (4.0.2) lib/action_dispatch/middleware/request_id.rb:21:in `call' rack (1.5.2) lib/rack/methodoverride.rb:21:in `call' rack (1.5.2) lib/rack/runtime.rb:17:in `call' activesupport (4.0.2) lib/active_support/cache/strategy/local_cache.rb:83:in `call' rack (1.5.2) lib/rack/lock.rb:17:in `call' actionpack (4.0.2) lib/action_dispatch/middleware/static.rb:64:in `call' rack (1.5.2) lib/rack/sendfile.rb:112:in `call' railties (4.0.2) lib/rails/engine.rb:511:in `call' railties (4.0.2) lib/rails/application.rb:97:in `call' rack (1.5.2) lib/rack/lock.rb:17:in `call' rack (1.5.2) lib/rack/content_length.rb:14:in `call' rack (1.5.2) lib/rack/handler/webrick.rb:60:in `service' /usr/local/rvm/rubies/ruby-2.1.0/lib/ruby/2.1.0/webrick/httpserver.rb:138:in `service' /usr/local/rvm/rubies/ruby-2.1.0/lib/ruby/2.1.0/webrick/httpserver.rb:94:in `run' /usr/local/rvm/rubies/ruby-2.1.0/lib/ruby/2.1.0/webrick/server.rb:295:in `block in start_thread' 

请帮忙

将font-awesome集成到rails的最简单方法是使用font-awesome-rails gem。 它将font-awesome集成到rails资产管道。

在你的Gemfile中添加

 gem "font-awesome-rails" 

并运行bundle install来安装gem

然后在你的scss文件中导入它

 @import "font-awesome"; 

而已! 现在您可以在视图中使用它了

  

如果您更喜欢使用css而不是scss,那么在application.css中添加require语句

 *= require font-awesome 

更新

如果您不想使用font-awesome-rails gem,请按照步骤操作

  1. 将字体放在app / assets / fonts文件夹中

  2. 在config / application.rb中添加以下行

     # Add fonts path config.assets.paths << "#{Rails.root}/app/assets/fonts" # Precompile additional assets config.assets.precompile += %w( .svg .eot .woff .ttf ) 
  3. 用font-awesome.css.erb声明你的字体

     @font-face { font-family:'FontAwesome'; src: font-url('fontawesome-webfont.eot'); src: font-url('fontawesome-webfont?#iefix') format('embedded-opentype'), 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; } 

我希望这能帮到您。