Fixing font-awesome on Heroku

My icons from the font-awesome-rails gem were showing up fine in my development environment. But in production on Heroku, some showed up as empty boxes, and others did not show up at all.

In the “Network” tab of Google Chrome, I saw that the http response status for the font assets was: 206 Partial Content. Not very informative. A more useful message came from the “Console” tab:

Font from origin http://shielded-falls-2406.herokuapp.com has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin http://expensemanager.teddywidom.com is therefore not allowed access.

I had recently added a custom domain for my app: expensemanager.teddywidom.com. But the fonts were being requested from the original heroku domain: shielded-falls-2406.herokuapp.com.

The solution was to add this line to config/environment/production.rb:

config.action_controller.asset_host = 'expensemanager.teddywidom.com'

(substituting your own host for ‘expensemanager.teddywidom.com’)

The one caveat to this is that now font-awesome icons will no longer work if you visit the app using the shielded-falls-2406.herokuapp.com domain.  If anyone knows a workaround to this, please share it with us!

One Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s