Add Font Awesome CDN to WordPress Without a Plugin

FontAwesome without a pluginIn 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.

10 Comments

  1. FAT Media

    Thanks for the heads up Terence. We’ve also left the old IE7 styles for any unfortunate enough to still be supporting IE7. As of 4.0 FontAwesome is no longer compatible. 🙂

  2. DirtyDave

    Robert, I tried this and got this error message: Parse error: syntax error, unexpected ‘<' after putting it in the functions php file.

    Any ideas what I am doing wrong?

    1. WP Bacon

      It sounds like you might be adding the opening php tag when you don’t need to. If you’re adding it to functions.php, you probably don’t need the opening tag.

      1. DirtyDave

        Thanks for the reply. I thought of that this morning. I really need a vacation.

      2. DirtyDave

        Okay, that worked, but how do I get the icons to display? Sorry to ask maybe some too elementary questions, but I am used to having the widget and short codes and I really wanted to try this and make it work.

        Thanks for your help in advance.

        1. DirtyDave

          Never mind, figured it out. Vacation time is here.

Comments are closed.