How to add Font Awesome 5 icons in WP Admin dashboard menu?

Question

Just like with Font Awesome 4, you can enqueue styles in your theme to take effect on the admin pages. This allows you get styles needed for Font Awesome icons to be used. Just update your functions as needed for version 5.

Here is an example of how to enqueue Font Awesome styles:

function fontawesome_dashboard() {
   wp_enqueue_style('fontawesome', 'https://use.fontawesome.com/releases/v5.8.1/css/all.css', '', '5.8.1', 'all');
}

add_action('admin_init', 'fontawesome_dashboard');

Additionally you will need to add the overriding styles to replace WordPress dash icons with Font Awesome icons.

Here is an example of how to override a default dash icon:

function fontawesome_icon_dashboard() {
   echo '<style type="text/css" media="screen">
    icon16.icon-media:before, #adminmenu .menu-icon-media div.wp-menu-image:before {
      font-family: "Font Awesome 5 Free" !important;
      content: "\\f03e";
      font-style:normal;
      font-weight:400;
    }
        </style>';
 }
add_action('admin_head', 'fontawesome_icon_dashboard');

Notice the font-family change that is needed for Font Awesome 5, but more specifically notice the font-weight which is needed for specific icons. To be more clear, you can see on the Font Awesome cheat sheet that the icons are divided in sections i.e. Solid, Regular and Brand. Well solid and regular icons both use the same font family, however you will need to designate different weights for both icon types. Solid uses font-weight: 900 and Regular uses font-weight: 400. Without these your Font Awesome 5 icons won’t work.

Here is an example for overriding a custom post type with a Solid icon:

function fontawesome_icon_dashboard() {
   echo '<style type="text/css" media="screen">
    icon16.icon-media:before, #adminmenu .menu-icon-media div.wp-menu-image:before {
      font-family: "Font Awesome 5 Free" !important;
      content: "\\f03e";
      font-style:normal;
      font-weight:400;
    }
    icon16.icon-media:before, #adminmenu .menu-icon-cars div.wp-menu-image:before {
      font-family: "Font Awesome 5 Free" !important;
      content: "\\f1b9";
      font-style:normal;
      font-weight:900;
    }
        </style>';
 }
add_action('admin_head', 'fontawesome_icon_dashboard');

In the above example the custom post type is Cars, which has given the dash icon the class of menu-icon-cars and it’s being overridden by content: "\\f1b9".

Related Posts: