Dear Tech Friends,

I have one specific requirement I'm experimenting that, I need an image in home tab (left to the text) in primary links, which is displaying on horizontal in header area of the page.

How can I set an image as follows:


<ul>
<li><img src="images/home_icon.gif" width="14" height="13" /><a href="#">Home</a></li>
<li><a href="#">Menu1</a></li>
</ul>

I hope a custom override, but any clue is anticipated.

Regards,
Richard

Comments

jarek foksa’s picture

In this case I would rather define the image using background-image CSS property instead of adding non-sematic <img> tag. The easiest way to do this would be to install Menu attributes module. It will allow you to set custom classes for menu items. E.g. you can specify "home-link" as class name of your home link and then add image next to it with this CSS rule:

.home-link {
padding-left: 30px;
background: url(images/home_icon.gif) no-repeat left center;
}
Dupal Idiot’s picture

Thank you very much it worked.