Specifying Mouseover Icon for Custom Post

Question

I am using the register_post_type function in order to create a custom post type. I am already using the menu_icon parameter in order to set the admin icon for the post type. But, how can I set the 'mouseover' icon? When I have seen other plugins create custom post types, they have a seperate 'color' version of their icon that shows on mouseover -

Answer 1

This is more of a CSS question. However, if you create your icon as CSS sprite, you just shift between versions of it in your CSS. Something like:

#toplevel_page_my_item .wp-menu-image {
  background: url('images/sprite.png') no-repeat 0 8px !important;
}

#toplevel_page_my_item:hover .wp-menu-image,
#toplevel_my_item.wp-has-current-submenu .wp-menu-image {
  background-position: 0 -24px !important;
}

Answer 2

The code I use is:

add_action( 'admin_head', 'cpt_icon');
function cpt_icon() { 
    echo '
        #menu-posts-cpt .wp-menu-image {
            background: url('.get_template_directory_uri().'/img/cpt-icon.png) no-repeat 6px 6px !important;
        }
        #menu-posts-cpt:hover .wp-menu-image, #menu-posts-cpt.wp-has-current-submenu .wp-menu-image {
            background-position:6px -16px !important;
        }
        #icon-edit.icon32-posts-cpt {background: url('.get_template_directory_uri().'/img/cpt-32x32.png) no-repeat;}
    ';
}

Where:

• 'cpt-icon.png' is the sprite which has the monochrome & color icons for the admin menu.
• 'cpt-32x32.png' is the icon which appears on the CPT pages such as(Add New CPT, Edit CPT, etc.).

Sample icons:

cpt-icon.png

cpt-32x32.png

Answer 3

vancoder is correct, a sprite would be your best bet. Here is my example:

My CPT is called "contact".

Here is how it shows in the admin menu nav:

<li class="menu-top menu-icon-post" id="menu-posts-contact">

The css I use to display a custom image when not active/hovered over:

#adminmenu #menu-posts-contact div.wp-menu-image {
    background-position: 0 0;
}

The css for hover:

#adminmenu #menu-posts-contact:hover div.wp-menu-image {
    background-position: 0 -30px;   
}

The css for active state:

#adminmenu #menu-posts-contact.current div.wp-menu-image {
    background-position: 0 -60px;
}