0

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?

1
  • Try intercepting the $submenu and $menu variables and assign your own classes.
    – kaiser
    Feb 21, 2013 at 18:38

1 Answer 1

0

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 } ?>
2
  • jQuery('#menu-settings .wp-menu-image').replaceWith('<div style="font-size:18px;" class="icon16 fonticon"><i class="icon-cogs"></i></div> ');
    – TheWebs
    Feb 21, 2013 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."
    – Brooke.
    Feb 21, 2013 at 20:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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