How to change Dash icon color in WordPress admin menu with CSS?

Change the default color for dash icon in the admin menu

Probably you have this question when you create a Custom WordPress Theme and add some specific post types functions in your WordPress theme. Sometimes we want to color a bit the administration of our menus.

How do I change the color of my icons in WordPress?

Today’s topic I search in my working task was how to change the default color for my custom post type name and dash icon in the WordPress admin menu. Looks like is not a very easy job and must use a few coding stuff to be able to change the default color of the dash icon in the admin menu.

The first step to change the default color for the dash icon in the admin menu:

Find you function.php file and add new style sheet file like admin-style.css in theme root or some specific directory if you want to keep the file structure clean and easy for managing when editing your WordPress Theme at all.

Create a CSS file like admin-style.css and check where did you create this file it can be in the main root or like I said it can be in some specific directory in your WordPress theme. This is important to enqueue your new admin style CSS file correct in the functions.php file.

Second Step to change the default color for the dash icon

Add the code below in your functions.php file to enqueue the new admin style for your WordPress admin dashboard and to be able to add some styling to your admin WordPress Dashboard

// Add style for Admin Menu Post type and icons, theme settings
function custom_admin_style() {
    wp_enqueue_style('my-admin-style', get_stylesheet_directory_uri() . '/css/admin-style.css');
}
add_action('admin_enqueue_scripts', 'custom_admin_style');

When you create your admin-style.css and add the script in the functions.php go to you admin-style.css and the code to change the color of the icon in WordPress Dashboard menu with the color you want the specific icon to be changed. Find the name of the icon in the WordPress Admin Dashboard with the Inspect element option in your Browser.

In my case, I use a custom dash icon from the WordPress DashIcons list and add the code below change my Icon to blue color.

.wp-menu-image.dashicons-before.dashicons-admin-site:before {
    color: rgb(36, 86, 188) !important;
}

I use “!Important” just in case to override the color from the default style admin loader.

If you find useful this lesson for the topic How to change the color for WordPress icon in the admin dashboard in your WordPress website share this with your friends.

Thanks