Add Font Awesome CDN to WordPress Without a Plugin

In case you’re not familiar, Font Awesome is a regularly-updated icon font from the people behind Twitter’s Bootstrap. According to their website:

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

If you’re going to use font icons, the Font Awesome CDN version is wise choice for a number of reasons. Because the icons are served out using a global content delivery network, they’ll load quickly no matter where your website visitors are. Plus, because the Font Awesome CDN is used by tons of other sites, there’s a good chance your visitors will already have it cached in their browser. Mo’ speed!

There are a few different ways to use the Font Awesome CDN in WordPress. You could use a plugin, but I think the simplest method is to enqueue NetDNA’s BootstrapCDN directly into your theme. It’s really easy to add to just about any WordPress theme.

Add the Following Code to Your Theme’s functions.php File:

<?php
add_action( 'wp_enqueue_scripts', 'prefix_enqueue_awesome' );
/**
 * Register and load font awesome CSS files using a CDN.
 *
 * @link   http://www.bootstrapcdn.com/#fontawesome
 * @author FAT Media
 */
function prefix_enqueue_awesome() {
	wp_enqueue_style( 'prefix-font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css', array(), '4.0.3' );
}

Need to Support IE7? Use This Code Instead:

If you need to add IE7 support, you can do it the WordPress way. Thanks to my friend Travis Smith who originally posted the code to check for IE versions. If you don’t already read his blog, go check it out. He’s got a ton of great resources.

IMO supporting IE7 is a bad idea in general, but if the person footing the bill disagrees, here’s how you can include support for IE7:

<?php
/**
 * Registers and loads font awesome
 * CSS files using a CDN.
 *
 * @link http://www.bootstrapcdn.com/#tab_fontawesome
 * @author FAT Media
 */
add_action( 'wp_enqueue_scripts', 'prefix_enqueue_awesome' );
/**
 * Register the awesomeness and add IE7 support
 *
 * @global $wp_styles
 * @global $is_IE
 */
function prefix_enqueue_awesome() {
	global $wp_styles, $is_IE;
	wp_enqueue_style( 'prefix-font-awesome', '//netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css', array(), '3.2.0' );
	if ( $is_IE ) {
		wp_enqueue_style( 'prefix-font-awesome-ie', '//netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome-ie7.min.css', array('prefix-font-awesome'), '3.2.0' );
		// Add IE conditional tags for IE 7 and older
		$wp_styles->add_data( 'prefix-font-awesome-ie', 'conditional', 'lte IE 7' );
	}
}

And that’s pretty much it. Once you’ve got the Font Awesome CDN loaded into your WordPress theme you can start adding scalable, retina-friendly font icons until your heart’s content.

It’s Like Icon Magic!

Neat, eh? Here’s a complete list of all the available Font Awesome icons you can use. If you have any questions or comments, leave ‘em bellow.