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

admin管理员组

文章数量:1426804

If you are currently using or looking to start using Font Awesome in your theme to get icons for your dashboard menu, but the icons you are wanting to use are in Font Awesome 5 and the version 4 implementation isn't working for newer icons. You might have been asking yourself the same question I have...

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

Just so you know, I plan to answer my own question, so there will be no code or examples in the question section as everything you need to know will be in the answer.

If you are currently using or looking to start using Font Awesome in your theme to get icons for your dashboard menu, but the icons you are wanting to use are in Font Awesome 5 and the version 4 implementation isn't working for newer icons. You might have been asking yourself the same question I have...

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

Just so you know, I plan to answer my own question, so there will be no code or examples in the question section as everything you need to know will be in the answer.

• plugin-development
• theme-development
• admin-menu

Share Improve this question edited May 20, 2019 at 22:54 mcphersonjr asked May 6, 2019 at 20:34 mcphersonjrmcphersonjr 17111 silver badge99 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 5

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/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".

本文标签： plugin developmentHow to add Font Awesome 5 icons in WP Admin dashboard menu