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

Question

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!

Answer 1

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.

Answer 2

I had the same problem! Font awesome was working on local however when deployed to Heroku all icons appeared as a small white square. It was previously working without problem.
This worked for me: Add below line to layout file.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
Works fine now.