Adding image next to jQuery Mobile Select Menu

jquery-mobile

Solution

You can add icons to just about anything by adding the following parameters to the element you want to icon to appear within:

 data-icon="arrow-l" data-iconpos="left" 

Where `arrow-l` specifies an arrow pointing left.

If you want to specify your own icon/image rather than use one provided by jQuery Mobile, then you can add an image inside the li (before your text), with a class of either `ui-li-icon` or `ui-li-thumb` :

<li>
    <img src="images/gf.png" alt="France" class="ui-li-icon">
    <a href="#">Social Triangle</a>
</li>

ui-li-icon, appears to be restricted to 16px X 16px, and uses the following css conditions:

ui-li-icon {
max-height: 16px;
max-width: 16px;
}

ui-li-thumb, appears to be restricted to 80px X 80px, and uses the following css conditions:

.ui-li-thumb {
max-height: 80px;
max-width: 80px;
}

If you take a look at the above links to the jQuery Mobile documentation, it shows you how to use them in more detail, just check the source:

Problem

Original source