字體真棒圖標在Heroku上顯示為黑色方塊 - Font Awesome icons shows up as black squares on Heroku -开发者知识库

字體真棒圖標在Heroku上顯示為黑色方塊 - Font Awesome icons shows up as black squares on Heroku -开发者知识库,第1张

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

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

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.

我按照gem的說明,將@import包含在application.css.scss中。我也在html中使用正確的Rails語法來引用圖標。一切都在當地很好用,但是一旦我推進我的舞台Heroku環境,圖標就會顯示為黑色方塊。

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

這是一段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

Is there something I'm missing?

有什么我想念的嗎?

Thanks for the help!

謝謝您的幫助!

1 个解决方案

#1


0  

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

如果您有另一種字體覆蓋圖標字體,則會發生這種情況。搜索你的CSS,看看是否還有另一個font-family:OtherFont!important;。

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

首先確保加載了Font-awesome CSS,並且font-urls指向正確的字體。

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

然后顯式指定你的i.fa標簽(Font-awesome使用它來創建字體)

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

Worked great for me.

對我來說很棒。

最佳答案:

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复