How do i add images before text in Wayfinder horizontal menu?

Im building a menu that is inline and i want to add a square box with an arrow in it before the automatically generated text.

i have included the code that im using for the Ul, any help is appreiciated.

css

#menu
{
width: 756px;
border-bottom: 1px dotted #006567;
padding-left:10px;
}
#menu ul
{
margin-left: 0px;
padding: 5px;
width: auto;
margin-bottom:0px;
}
#menu ul li
{
display: inline;
list-style-type: none;
}
#menu ul li a
{
padding-top: 5px;
text-decoration: none;
text-transform: uppercase;
}
#menu ul li a:hover, #menu ul li a.active
{
color: Red;
}

Wayfinder call

[!Wayfinder?startId=`0` &level=`1`!]

many thanks in advance

infront of every item, so it would be

image: list item image:list item

ill try that tutorial thanks