Skip Navigation
Madison, Wisconsin
Powderkeg Web Design
June 19, 2015

Replace Dash Icons with Font Awesome ones in Wordpress Admin!

Nick
Nick
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.

Nick Kalscheur

Nick Kalscheur

Lead Developer