CODEWITHSUNDEEP
ruby-on-railsrubyherokufont-awesome
user2608594
user2608594

Reputation: 31

Font Awesome icons shows up as black squares on Heroku

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!

Upvotes: 2

Views: 1279

Answers (2)

Ben Strachan
Ben Strachan

Reputation: 37

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.

Upvotes: 0

William
William

Reputation: 749

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.

Upvotes: 0

Related Questions