How can I add an image next to the text in a menu item?

Is there a way to add an image prior to the menu text? I need to add a small image, to the left of each item (almost like a bullet).

Solution:

You can do this by directly adding the HTML for the image into the "Menu Text" field.

The image can be added before, after, or inside the menu title.

For example, if your menu item is called "Products" then you would type the following into the menu text field to have the image appear to the left of the text:

<img src='myimage.gif' width='10' height='10'>Products

This will look strange in GoLive but will appear correctly in the browser. Be sure to use single quotes in the HTML (') because double quotes are escaped.

Tips:

If you need to add lots of space between the image and your text, simply type in non-breaking spaces between the <img ...> tag and the menu title. Normal spaces will be stripped out in some browsers.

It’s best to use images of the same height so the padding amount is the same (padding goes to the top of the image).

There’s no over state for the image so make sure the image background is transparent if the menu changes color on rollover.

You can use images even when you are using arrows as the example below illustrates: