字體真棒圖標顯示爲Heroku上的黑色方塊

Question

我在我的Rails項目中使用了Font-Awesome-Sass 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-url指向正確的字體。

然後顯式指定i.fa標籤（用於由字體，真棒創建字體）到

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

工作對我來說太棒了。