CDN breaking Hueman’s Font Awesome? Here’s how you fix it.

If you have been using MaxCDN (or any other CDN, really) and have used Font Awesome in WordPress (for example, in the Hueman theme), then you might notice your awesome looking fonts and icons puking itself into little square icons instead.

Here’s how you fix it. Open up functions.php on your child theme and add the following snippet to make Font Awesome load via BootstrapCDN instead. Snippet courtesy of Sridhar Katakam:

//* Load Font Awesome
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {

wp_enqueue_style( ‘font-awesome’, ‘//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css’ );

}

After that, remember to purge the cache off MaxCDN, and obviously clear your browser cache too.

If this fix doesn’t work, you might want to look into modifying your .htaccess file to send the right CORS headers (MaxCDN reference or WP support thread from theme author)

This means:

  1. Download existing .htaccess via FTP from your web root folder
  2. Tack on the code from reference articles into .htaccess
  3. Save
  4. Upload new .htaccess file back onto web host
  5. Clear MaxCDN cache
  6. Test

For what it’s worth, the .htaccess method didn’t seem to work for me, but adding the BootStrapCDN snippet worked.

If you’re using Sucuri CloudProxy as well, here’s a handy guide on what to do.

For WordPress MaxCDN, set it up this way with W3TC plugin.

Advertisements