Changing Pencil

Home Forums Automattic Blog Simple Changing Pencil

Tagged: , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #107772 Resolve


    The theme explanation page suggests you can tweak the menu logos.

    How do you:
    (1) Change the pencil to another graphic; and
    (2) Associated the menu tabs with an icon?

    Thanks in advance.

    The blog I need help with is


    Hi there,

    To change the pencil to a different graphic:

    1. Create the graphic in an image editor. For best results, the new graphic should be 30px wide and 30px high.

    2. Upload the image to your Media Library (Dashboard > Media > Add New), and note the image’s URL.

    3. Next, paste the following CSS into the CSS Editor:

    .top-page .main-navigation > div > ul > li.current-menu-item > a:before, .top-page .main-navigation > div > ul > li.current_page_item > a:before {
    background: url("http://path/to/your/new/image") no-repeat scroll 50% 0 #BD3040;

    To give each item in your menu its own icon, repeat the steps 1 and 2 above, creating each graphic and uploading them to your Media Library. You might also need to remove the CSS I gave you for the pencil, because it could conflict with your custom icons.

    After you have done that, you’ll need to assign each menu item a unique CSS class. To do this, go to Appearance > Menu, and, for each item in your menu, click the little down arrow in the right corner and find the box that says “CSS” class. Enter a unique class name for each one. Save your menu.

    Next, use the following CSS to display the icons:

    .main-navigation .your-class-name-here {
    background: url("http://path/to/your/icon/") no-repeat scroll 50% 0 #BD3040;

    Repeat the above CSS for each individual menu item, replacing “your-class-name-here” with the class name for that particular item, and replacing the background image URL with the path to the icon you uploaded to the Media Library.

    Let me know how this goes for you, or if you run into any trouble along the way.



    I will give this a try later on. I’ll post if I have any difficulties. Thanks for the quick response, I appreciate it.



    You’re welcome! :)



    Hi there, just checking with you. Did you get a chance to give this a try yet?



    Hi, checking in with you one more time. Are you all set or do you still need assistance?



Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Changing Pencil’ is closed to new replies.