add icon to menu

[psaudio 0]

I am still hoping someone can help me recreate the exact menu navigation buttons that I have in iBlog4, and as a followup question, is there any way to duplicate the iBlog Pro feature of adding an icon for the home button? Navigation Home Icon Optionally replace the home icon in your navigation? "Use this option to replace the home icon image in your navigation. Default image size is 26px high by 24px wide". Thanks for any help.

[Jenny 33]

Would love to know this also so I'm listening in. :)

[catrina 103]

You'll need to get a hold of the home image icon and then a custom menu can be created to include the "home" page link. Once that's done, CSS can be used to add the image icon in its place.

[psaudio 0]

....If only I knew CSS that might all make sense. :)

[catrina 103]

Do you already have the home image icon you want?

[psaudio 0]

Yup.

[catrina 103]

First you'll need to add the home link to your navigation menu. Are you using a custom menu right now or just the default?

[psaudio 0]

Default. I wish I knew how to use a custom menu - but that seems not possible. I will add the Home pgae now. Here's the path to the image http://66.40.29.164/~wpsaudio/wp-content/uploads/2011/06/Favicon-home-button.png

[catrina 103]

You can create a custom menu by going to Appearance > Menus. When you create the custom menu, you can set it as "Primary Navigation" and it'll automatically show up as the main navigation.

[psaudio 0]

Oh, yes of course. I thought you meant custom looking menu. Sorry - that's what I don't know how to do. I know about changing the menu around for content and placement.

[kastelic 6]

Start with making a menu item that links to your home page. Then you have to find the specific class for that menu item with the Chrome Inspector. Then use CSS to make it into an image. Your Css will look something like this, but with a different class name: [code] #menu-item-41 a{ font-size: 0; display: block; background: url(http://66.40.29.164/~wpsaudio/wp-content/uploads/2011/06/Favicon-home-button.png) no-repeat; } [/code]