jQuery mobile add custom icon to list menu

Question

How do I add an custom icon to the left listview. For each listview I have an icon that is different from one another. I tried using tag to display icon but I get a bit of a problem. What should I add in the css so that it can be done?

<li><img src="css/test.png"><a href="epg.html" data-rel="page" data-transition="slide" data-inline="true">Menu 1</a></li>

The result is like this :

Answer 1

You need to restructure you html a little bit but here's the official documentation on it.

ListView Icons

And foryour example:

<li><a href="epg.html" data-rel="page" data-transition="slide" data-inline="true"><img src="css/test.png" class="ui-li-icon ui-corner-none">Menu 1</a></li>

*Note: This is supposed to be for a 16x16 icon. Your icon may be a lttiel large. Can't quite tell.