Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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)

  <ul>
    <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=
    "true"></a></li>
  </ul>

  <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'>
    Mini-Feed
  </div>

  <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>
  </ul>

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
add comment

1 Answer

up vote 0 down vote accepted

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

<?php
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;
        }
    </style>
<?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
add comment

Your Answer

 
discard

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.