How to Add Font Awesome Icons to WordPress Menus?

I assume you are wanting to add custom icons to the dashboard? Well with the latest update in wordpress to 3.8, dashboard icons have changed. They are now actually a font. This is actually quite cool as fonts can easily change colors with css and are responsive in size as well.

First I will tell you how to add a custom icon using the pre-built dashicons that have been created by the MP6 team (developers of the latest dashboard). Head on over to http://melchoyce.github.io/dashicons/ to view all of the currently available dashicons. If you want to make a change to a current menu item, this is the function to do it. Add this to your themes’ functions.php file or to your custom plugin. This would change the default icon for the “Posts” menu:

function custom_post_css() {
   echo "<style type="text/css" media="screen">
       #adminmenu .menu-icon-post div.wp-menu-image:before {
            content: '\\f337'; // this is where you enter the dashicon font code
        }
     </style>";
}
add_action('admin_head', 'custom_post_css');

If you want to add a icon for a custom post type, it is much the same with a little twist:

function cptname_custom_css() {
   echo "<style type="text/css" media="screen">
       #adminmenu .menu-icon-cptname div.wp-menu-image:before {
            content: '\\f337'; // this is where you enter the dashicon font code
        }
     </style>";
}
add_action('admin_head', 'cptname_custom_css');

Insert your custom post type name in place of “cptname”. Now the twist. We have to add a class to our custom post type css. To do this, we simply add a line of code to our custom post type registration hook:

'menu_icon' => '',

So our whole registration hook looks like so:

$args = array(
 'labels' => $labels,
 'menu_icon' => '',
 'public' => true,
 'publicly_queryable' => true,
 'show_ui' => true, 
 'show_in_menu' => true, 
 'query_var' => true,
 'rewrite' => true,
 'capability_type' => 'post',
 'has_archive' => true, 
 'hierarchical' => false,
 'menu_position' => null,
 'supports' => array('title', 'editor', 'thumbnail')
); 
 register_post_type('cptname',$args);
}

Now, if you want to use the font awesome icons, we just need to upload them to our theme.
Download the font and put the CSS and font files in the appropriate folder of your current theme. Then we need to add some more code to our themes functions.php file or your custom plugin:

function my_custom_fonts() {
<style>
 @font-face {
     font-family: FontAwesome;
     src: url(/path-to-font-folder/fontawesome-webfont.woff);
 }
</style>
}

add_action('admin-init', 'my_custom_fonts');

And now we use the code above to selectively pick our new icons. This would once again change the “Posts” menu icon using the FontAwesome icon set:

function custom_post_css() {
   echo "<style type="text/css" media="screen">
       #adminmenu .menu-icon-post div.wp-menu-image:before {
            font-family:  FontAwesome !important;
            content: '\\fa-apple'; // this is where you enter the dashicon font code
        }
     </style>";
}
add_action('admin_head', 'custom_post_css');

Hope this helps you. I haven’t actually used the font awesome icons yet, but have been customizing my dashboard icons already. I’m loving the latest dashboard overhaul, but there is a learning curve.

Just made an edit: I tried out some things here and actually used the font-awesome icons on my own site:

add this to your functions.php or plugin:

function font_admin_init() {
   wp_enqueue_style('font-awesome', 'http://netdna.bootstrapcdn.com/fontawesome/3.1.1/css/font-awesome.css'); 
}

add_action('admin_init', 'font_admin_init');

then add this to select the actual icon:

function custom_post_css() {
   echo "<style type="text/css" media="screen">
       #adminmenu .menu-icon-post div.wp-menu-image:before {
            font-family:  FontAwesome !important;
            content: '\\f0f2'; // this is where you enter the fontaweseom font code
        }
     </style>";
}
add_action('admin_head', 'custom_post_css');

You can find the codes listed in the css file.