How to Add Font Awesome Icons to WordPress Menus

fa-icon-to-wp-admin-menu.md

Using Font Awesome Icon In menu without plugins

When creating a custom post type, write empty attribute "menu_icon": So our whole registration hook looks like so:

$args = array(
    'labels' => $labels,
    'public' => true,
    'publicly_queryable' => true,
    'show_ui' => true,
    'show_in_menu' => true,
    'query_var' => true,
    'rewrite' => true,
    'capability_type' => 'post',
    'has_archive' => true,
    'hierarchical' => false,
    'menu_position' => null,
    'menu_icon' => '',
    'supports' => array( 'title', 'editor', 'thumbnail', 'excerpt' ),
    'taxonomies' => array('workscategory')
);
register_post_type( 'works', $args );

Now, if you want to use the font awesome icons, we just need to upload them to our theme. If the main theme styles are compiled on sass, connect it to the file admin.scss, and then include this file in functions.php:

// Register admin scripts and styles
function add_scripts_admin() {
    wp_enqueue_script( 'js_admin', get_template_directory_uri() . '/js/admin.js', array( 'jquery' ) );
    wp_enqueue_style('alio_admin_style', get_template_directory_uri() . '/css/admin.css');
}
add_action( 'admin_init', 'add_scripts_admin' );

In the file admin.scss write your custom styles for a custom post type named works in that example, so an id we need to customize is called #menu-posts-works:

@import 'vars';
@import 'font';

#adminmenu #menu-posts-works div.wp-menu-image:before {
    font-family:  "Font Awesome 5 Pro" !important;
    content: '\f49d';
    font-weight: 600;
    color: $lnkRed;
}