ruby-on-rails - Font Awesome 图标在 Heroku 上显示为黑色方 block

Question

我在我的 Rails 项目中使用 Font-Awesome-Sass gem。

我按照 gem 的说明进行操作，并将 @import 包含到 application.css.scss 中。我还在 html 中使用正确的 Rails 语法来引用图标。一切都在本地运行良好，但一旦我推送到我的暂存 Heroku 环境，图标就会显示为黑色方 block 。

这是 staging.rb 的片段(我正在谈论的暂存 Heroku 环境)

 # Code is not reloaded between requests.
  config.cache_classes = true

  config.eager_load = true

  # Full error reports are disabled and caching is turned on.
  config.consider_all_requests_local       = false
  config.action_controller.perform_caching = true

  # Enable Rack::Cache to put a simple HTTP cache in front of your application
  # Add `rack-cache` to your Gemfile before enabling this.
  # For large-scale production use, consider using a caching reverse proxy like nginx, varnish or squid.
  # config.action_dispatch.rack_cache = true

  # Disable Rails's static asset server (Apache or nginx will already do this).
  config.serve_static_assets = true

  # Compress JavaScripts and CSS.
  config.assets.js_compressor = :uglifier
  # config.assets.css_compressor = :sass

  # Do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = true

  # Generate digests for assets URLs.
  config.assets.digest = true

  # Version of your assets, change this if you want to expire all your assets.
  config.assets.version = '1.0'

  # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
  # config.force_ssl = true

  # Set to :debug to see everything in the log.
  config.log_level = :info

  # Use a different cache store in production.
  # config.cache_store = :mem_cache_store

  # Enable serving of images, stylesheets, and JavaScripts from an asset server.
    config.action_controller.asset_host = "//MYCLOUDFRONTHOSTINGURL-hidden-for-this-question"

  # Enable locale fallbacks for I18n (makes lookups for any locale fall back to
  # the I18n.default_locale when a translation can not be found).
  config.i18n.fallbacks = true

  # Send deprecation notices to registered listeners.
  config.active_support.deprecation = :notify

  # Disable automatic flushing of the log to improve performance.
  # config.autoflush_log = false

  # Use default logging formatter so that PID and timestamp are not suppressed.
  config.log_formatter = ::Logger::Formatter.new

有什么我想念的吗？

感谢您的帮助!

Answer 1

当您使用另一种字体覆盖您的图标字体时，就会发生这种情况。搜索您的 CSS 以查看是否有另一个 font-family:OtherFont!important;。

首先确保加载了 Font-awesome CSS，并且 font-urls 指向正确的字体。

然后明确指定你的i.fa标签(Font-awesome使用它来创建字体)

i.fa { 
    font-family:FontAwesome!important; 
}

对我来说效果很好。