字体真棒图标在Heroku上显示为黑色方块 [英] Font Awesome icons shows up as black squares on Heroku

问题描述

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

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

下面是一段staging.rb（我在谈论的暂存Heroku环境）

 ＃代码不会在请求之间重新加载。 
 config.cache_classes = true 
 
 config.eager_load = true 
 
＃完全错误报告被禁用，缓存打开。 
 config.consider_all_requests_local = false 
 config.action_controller.perform_caching = true 
 
＃启用Rack :: Cache在应用程序前放置一个简单的HTTP缓存
＃在启用此功能之前将`rack-cache`添加到您的Gemfile中。 
＃对于大规模生产使用，请考虑使用缓存逆向代理，如nginx，varnish或squid。 
＃config.action_dispatch.rack_cache = true 
 
＃禁用Rails的静态资产服务器（Apache或nginx已经这样做）。 
 config.serve_static_assets = true 
 
＃压缩JavaScript和CSS。 
 config.assets.js_compressor =：uglifier 
＃config.assets.css_compressor =：sass 
 
＃如果预编译的资源被遗漏，不要回退到资产管道。 
 config.assets.compile = true 
 
＃为资产URL生成摘要。 
 config.assets.digest = true 
 
＃如果您希望过期所有资产，请更改此资产的版本。 
 config.assets.version ='1.0'
 
＃强制通过SSL访问应用程序，使用Strict-Transport-Security并使用安全Cookie。 
＃config.force_ssl = true 
 
＃设置为：debug以查看日志中的所有内容。 
 config.log_level =：info 
 
＃在生产中使用不同的缓存存储。 
＃config.cache_store =：mem_cache_store 
 
＃启用来自资产服务器的图片，样式表和JavaScript的服务。 
 config.action_controller.asset_host =// MYCLOUDFRONTHOSTINGURL-hidden-for-this-question
 
＃启用I18n的语言环境回退（使查询任何语言环境回落到
 ＃无法找到翻译时的I18n.default_locale）。 
 config.i18n.fallbacks = true 
 
＃将弃用声明发送给注册的侦听器。 
 config.active_support.deprecation =：notify 
 
＃禁用自动刷新日志以提高性能。 
＃config.autoflush_log = false 
 
＃使用默认日志记录格式化程序，以便不抑制PID和时间戳记。 
 config.log_formatter = :: Logger :: Formatter.new 
  

m缺少？

感谢您的帮助！ 解决方案

当你有另一种字体覆盖你的图标字体。搜索你的CSS，看看是否有另一个 font-family：OtherFont！important; 。

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

<然后明确地指定你的 i.fa 标签（Font-awesome用来创建字体）到

  i.fa {
 font-family：FontAwesome！important; 
} 
  

非常适合我。

I'm using the Font-Awesome-Sass gem with my Rails Project.

I followed the gem's instructions, and have included the @import into the application.css.scss. I'm also using the correct Rails syntax in the html to reference the icons. Everything works great locally, but as soon as I push to my staging Heroku environment, the icons just show as black squares.

Here is a snippet of staging.rb (the staging Heroku environment I was talking about)

 # 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

Is there something I'm missing?

Thanks for the help!

解决方案

This happens when you have another font overriding your icon font. Search your CSS to see if there is another font-family:OtherFont!important;.

First make sure that your Font-awesome CSS is loaded, and font-urls point to the correct fonts.

Then explicitly specify your i.fa tags (which are used by Font-awesome to create the font) to

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

Worked great for me.

这篇关于字体真棒图标在Heroku上显示为黑色方块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！