ruby on rails - Font Awesome icons shows up as black squares on Heroku -

i'm using font-awesome-sass gem rails project.

i followed gem's instructions, , have included @import application.css.scss. i'm using correct rails syntax in html reference icons. works great locally, push staging heroku environment, icons show black squares.

here snippet of staging.rb (the staging heroku environment talking about)

 # code not reloaded between requests.   config.cache_classes = true    config.eager_load = true    # full error reports disabled , caching turned on.   config.consider_all_requests_local       = false   config.action_controller.perform_caching = true    # enable rack::cache put simple http cache in front of application   # add `rack-cache` gemfile before enabling this.   # large-scale production use, consider using caching reverse proxy nginx, varnish or squid.   # config.action_dispatch.rack_cache = true    # disable rails's static asset server (apache or nginx this).   config.serve_static_assets = true    # compress javascripts , css.   config.assets.js_compressor = :uglifier   # config.assets.css_compressor = :sass    # not fallback assets pipeline if precompiled asset missed.   config.assets.compile = true    # generate digests assets urls.   config.assets.digest = true    # version of assets, change if want expire assets.   config.assets.version = '1.0'    # force access app on ssl, use strict-transport-security, , use secure cookies.   # config.force_ssl = true    # set :debug see in log.   config.log_level = :info    # use different cache store in production.   # config.cache_store = :mem_cache_store    # enable serving of images, stylesheets, , javascripts asset server.     config.action_controller.asset_host = "//mycloudfronthostingurl-hidden-for-this-question"    # enable locale fallbacks i18n (makes lookups locale fall   # i18n.default_locale when translation can not found).   config.i18n.fallbacks = true    # send deprecation notices registered listeners.   config.active_support.deprecation = :notify    # disable automatic flushing of log improve performance.   # config.autoflush_log = false    # use default logging formatter pid , timestamp not suppressed.   config.log_formatter = ::logger::formatter.new 

is there i'm missing?

thanks help!

this happens when have font overriding icon font. search css see if there font-family:otherfont!important;.

first make sure font-awesome css loaded, , font-urls point correct fonts.

then explicitly specify i.fa tags (which used font-awesome create font)

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

worked great me.