Replace Dash Icons with Font Awesome ones in Wordpress Admin!

I’ve always been a little underwhelmed with the amount of icons available for the WordPress admin menu. The dashicons library has grown, but it still pales in comparison to Font Awesome. I recently stumbled upon a nifty little hook that lets you replace any admin menu dashicon with a Font Awesome icon of your choice.

The following is assuming you’ve already queued up the Font Awesome font itself.

add_action('admin_head', 'fontawesome_icon_dashboard');
function fontawesome_icon_dashboard() {
   echo "<style type='text/css' media='screen'>
      #adminmenu #menu-posts-press div.wp-menu-image:before {
	 font-family:'FontAwesome' !important; content:'\f0a4'; }	
	 </style>";
}

This hooks in to the admin side of things when it loads the header. From here you can override the dashicon of your choice with a corresponding Font Awesome css content code. The only thing you have to do is to right click and inspect the icon you want to change and find the corresponding div containing the “wp-menu-image” class. This should have a unique ID attribute. The above code just echoes out CSS that will change the icon to whatever you tell it to.

You can find the css rule from the “Font Awesome Cheatsheet“.

The end result will be a more diverse selection for menu icons that give you (and your clients) that much more of a customized feel.