Welcome, humble developer! If you're as sick and tired of making icon sprites, and retina icon sprites, and social media retina icon sprites as I was about 2 months ago, have I got something great to tell ya: Font Awesome and Icon Vault are the answer to all your icon woes, both real, imagined, and unimagined.

Why are icon fonts awesome? Because, as Chris Coyier and others have said:

  1. You can easily change the size.
  2. You can easily change the color.
  3. They're a lot easier to update than an image sprite.

1. Using Font Awesome & Social Media Icons

I have not explored all of the many applications of Font Awesome icons. I am still yet a mere novice, a n00b, if you will, in the ways of using this grand icon set. There are currently 361 icons in the set, and the number of ways you can combine them would put a combination rotisserie chicken baster and coffee maker to shame.

However, the one way I'm using Font Awesome consistently on project after project is for social media icons. The set currently includes 47 brand icons, and since they're vector-based, not only is it easy to change their size, but you can also change the color, making hover effects a snap. Update: the makers of Font Awesome changed a lot in their 4.0.3 update. The HTML for a basic icon is written:

<i class="fa fa-facebook"></i>

Check out this neat Codepen, where I copied the visual style of Simple Icons with a few social media networks that came to mind:

Check out this Pen!

Want to read more? Check out the Font Awesome examples page.

2. The Benefits of Icon Vault: Custom Icon Fonts

Ironically, WordPress does not yet have an icon in Font Awesome, but if you need an icon that they don't yet have, submit a request for one!

In the meantime, pair Picons Social and other icons from your design with Icon Vault, which generates custom icon fonts for you. It's a little bit more time to set up, but modifying it is easy: just add another icon to your template folder, generate the font again, and replace the old files with the new ones.

No need to spend a lot of time making sure that your icons properly spaced in your sprite, or check what background-position you'll need to use in order to get the icon in the right spot.

dashicons3. Icons in the WordPress Admin: Dashicons & Font Awesome

As of WordPress 3.8, the style of the admin icons switched to a flat, icon-font setup. I like to use either Dashicons or Font Awesome for Custom Post Types and Admin Pages. Since implementing Dashicons is faster, I'll cover that first.

WordPress Menu Page Icons Using Dashicons

'menu_icon' => 'dashicons-hammer'

WordPress Menu Page Icons Using Font Awesome

To use Font Awesome for a WordPress CPT or Menu Page, you'll need to write a little CSS: just target a CPT menu item (inspect the WordPress admin sidebar to find the correct CSS ID) like this:

#adminmenu #menu-posts-custom_post_type_name .wp-menu-image:before {
 content: "\f135"; //find this by clicking on the individual icon on Font Awesome's site.
 font-family: 'FontAwesome' !important;
 font-size: 18px !important;
}

Next, add those styles to the WordPress admin by using the admin_head hook:

function namespaced_admin_styles_function() {
    echo '<link href="/link/to/admin-styles.css"  rel="stylesheet">';
}

add_action('admin_head', 'namespaced_admin_styles_function');

…and you're off and running! Well, not quite. You still need to add the Font Awesome stylesheet to both the WordPress admin and the front-end of your site. Fortunately, you can kill two birds with one stone this way:

function FontAwesome_icons() {
    echo '<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"  rel="stylesheet">';
}

add_action('admin_head', 'FontAwesome_icons');
add_action('wp_head', 'FontAwesome_icons');