How to Add Font Awesome Icons to WordPress Menus

How to Add Font Awesome Icons to WordPress Menus is one of a consistent way to show your custom icons on your Custom WordPress Plugin or Theme. First of all we need to know the important files which are necessary to work with fonts. The following line of code can help you to include all the fontawesome files, Especially fonts and css files,

wp_enqueue_style("kv_fontawesome", 'http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css');

Now, we are necessary to write the custom css function to create custom class for our desired icon from fontawesome.

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

And here is an alternative method to add icons to admin custom menu.

add_action( 'admin_menu', 'kv_custom_menu_item' );

function kv_custom_menu_item(){
    add_menu_page( 'KVCodes', 'Kvcodes', 'manage_options', 'kvcodes', '', 'dashicons-shield' );
}

Here , ‘dashicons-shield’ Denotes a shield icon from the http://melchoyce.github.io/dashicons/.  You can choose your desired one from here. Else, you can use above class” .menu-icon-kv’ for your custom menus from the fontawesome face.