in front as in to the left side or in front as in directly over the text
you can do both with css. the former can be done with a background image, while the latter requires an additional image tag
<ul id="menu">
<li>Some Link</li>
<li>Some Other Link</li>
<li>Boring Link</li>
</ul>
ul#menu li {
/* reset defaults */
list-style-type: none;
margin: 0;
padding: 0;
/* apply left-aligned logo */
padding-left: 1em;
background: url('/path/to/image.jpg') no-repeat top left;
}
that will apply the same image to all of the list items, to get a separate image per list item, you can use almost the same code, with a few minor updates
<ul id="menu">
<li id="link1">Some Link</li>
<li id="link2">Some Other Link</li>
<li id="link3">Boring Link</li>
</ul>
ul#menu li {
/* reset defaults */
list-style-type: none;
margin: 0;
padding: 0;
/* apply left-aligned logo */
padding-left: 1em;
}
ul#menu li#link1 {background: url('/path/to/image1.jpg') no-repeat top left;}
ul#menu li#link2 {background: url('/path/to/image2.jpg') no-repeat top left;}
ul#menu li#link3 {background: url('/path/to/image3.jpg') no-repeat top left;}
note that I still kept the padding in the original declaration... it will be inherited to all the list items still... the only thing that is different is that you want each list item to have its own unique image.
you can do this same process with "groups" of links too... just replace id with class (html) and # with . (css) respectively