Font awesome CDN 502 error

Introduction

I recently thought of adding Font Awesome through their CDN, so I have enqueued this onto my theme’s functions.php file.

But I’d like to share the proper implementation for WordPress.

Font Awesome JS Vs CSS Implementation

With the Font Awesome CDN, you have the choice to implement via JS or CSS.

I personally opted for the CSS implementation, for two things:

• What if JS is disabled? It will not work.
• CSS file is only ~300b gzipped!

It’s a Security Error

So here’s my code snippet:

/**
 * Enqueue Font Awesome icons.
 */
function font_awesome_icons() {

    wp_enqueue_style( 'fontawesome-icons', '//use.fontawesome.com/{Use_your_own_unique_id_here}.css' );

}
add_action( 'wp_enqueue_scripts', 'font_awesome_icons' );

The code above means:
‘create a stylesheet link <link rel="stylesheet"... with the source being our font awesome one’.

Update your protocol to just //

This is caused by ‘Security issues’, something to do with HTTPS on the CDN.

To make sure you never receive 502, use // so that your browser decides which one to go for. The logic goes with: (a) is HTTPS available? If not, (b) use http.

So in this case we have http working because we don’t fall into any certificate issues which may probably happen.

To avoid even the 1% chance of probability, let us use //.

Any downsides to this?

Yes, only if you’re supporting IE 7/IE 8 browsers, then you’ll download twice of the file. It’s a browser bug… but then again why complain about ~300b x 2?

The takeaway thoughts

When errors show up during your web development, immediately add it to the to-do list.

Even Billionaire Sir Richard Brandon mentions this:

Screw it, let’s do it!

It could be as adding to your to-do list:

• Need to fix CDN icons becoming square

This is especially true to this error which happens infrequently. But it was an error, not a warning, therefore requires to be fixed.