WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Using jquery, the icons of WordPress admin menu have been changed to use the twitter boostrap icons, done such as:

jQuery('#icon-themes.icon32').replaceWith('<div style="font-size:22px;" class="icon32 fonticon"><i class="icon-eye-open icon-large"></i></div> ');

But I have custom post type icons that I want to replace with icons from twitter boostrap. The problem is I am not sure what to target.

The source code for one looks such as: (this is for one menu item, which is a custom post type)

    <li class="wp-has-submenu wp-not-current-submenu menu-top menu-icon-mini-feed" id=
    "menu-posts-mini-feed"><a href='edit.php?post_type=mini-feed' class=
    "wp-has-submenu wp-not-current-submenu menu-top menu-icon-mini-feed" aria-haspopup=

  <div class="wp-menu-arrow"></div>

  <div class='wp-menu-image'><img src=
  "http://icons.iconarchive.com/icons/fatcow/farm-fresh/32/folders-icon.png" alt=
  "" /></div>

  <div class='wp-menu-name'>

  <ul class='wp-submenu wp-submenu-wrap'>
    <li class='wp-submenu-head'>Mini-Feed</li>

    <li class="wp-first-item"><a href='edit.php?post_type=mini-feed' class=
    "wp-first-item">All Mini-Feeds</a></li>

    <li><a href='post-new.php?post_type=mini-feed'>New Mini-Feed</a></li>

any ideas?

share|improve this question
Try intercepting the $submenu and $menu variables and assign your own classes. – kaiser Feb 21 '13 at 18:38
up vote 0 down vote accepted

I always like using this tutorial which would give you this code.

add_action( 'admin_head', 'cpt_icons' );
function cpt_icons() {
    <style type="text/css" media="screen">
        #menu-posts-POSTTYPE .wp-menu-image {
            background: url(<?php bloginfo('template_url') ?>/images/YOURIMAGE.png) no-repeat 6px -17px !important;
    #menu-posts-POSTTYPE:hover .wp-menu-image, #menu-posts-POSTTYPE.wp-has-current-submenu .wp-menu-image {
            background-position:6px 7px!important;
<?php } ?>
share|improve this answer
jQuery('#menu-settings .wp-menu-image').replaceWith('<div style="font-size:18px;" class="icon16 fonticon"><i class="icon-cogs"></i></div> '); – TheWebs Feb 21 '13 at 20:30
Is the jQuery above the way you ended up doing it? My way ALSO works but the beauty of WordPress is there are more then one way to do things. If the JQuery above is what you used please answer your own question and mark it "correct." – BandonRandon Feb 21 '13 at 20:33

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.