ruby 不加载 Font Awesome

Question

我正在尝试将 Font Awesome 加载到我的 View 中

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

我做了什么

配置/应用程序.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('<%= asset_path("fontawesome-webfont.eot?v=4.0.3") %>');
 src:url('<%= asset_path("awesome-webfont.eot?#iefix&v=4.0.3") %>') format('embedded-opentype'),
 url('<%= asset_path("fontawesome-webfont.woff?v=4.0.3") %>') format('woff'),
 url('<%= asset_path("fontawesome-webfont.ttf?v=4.0.3") %>') format('truetype'),
 url('<%= asset_path("fontawesome-webfont.svg?v=4.0.3#fontawesomeregula") %>') format('svg');
 font-weight:normal;font-style:normal}

并在 View 上加载css文件

<%= stylesheet_link_tag 'bootstrap.css' %>
  <%= stylesheet_link_tag 'animate.css' %>
  <%= stylesheet_link_tag 'font-awesome.min.css' %>
  <%= stylesheet_link_tag 'font.css' %>
  <%= stylesheet_link_tag 'app.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'

请帮忙

Answer 1

将 font-awesome 集成到 rails 的最简单方法是通过 font-awesome-rails gem 。它将 font-awesome 集成到 Rails Assets 管道。

在你的 Gemfile 添加

gem "font-awesome-rails" 

然后运行 bundle install 来安装gem

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

@import "font-awesome";

就是这样!现在您可以在您的 View 中使用它作为

<i class="fa fa-bell-o"></i>

如果您更喜欢使用 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;
   }
   

希望对您有所帮助。