Question

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

我遵循了gem的说明，并将@import包含在application.css.scss中。我也在html中使用正确的Rails语法来引用图标。一切都在本地很好用，但是一旦我推进我的舞台Heroku环境，图标就会显示为黑色方块。

这是一段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; 
}

对我来说很棒。

Answer 2

我遇到了同样的问题！ Font awesome正在本地上工作，但是当部署到Heroku时，所有图标都显示为白色小方块。以前没有问题。

这对我有用：将以下行添加到布局文件。

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

现在可以正常工作。

字体真棒图标在Heroku上显示为黑色方块

2 个答案: