The jQuery Mobile framework adds an icon to the right-hand side of an interactive list item (a list item having a link). You can also add an icon to the list item text and the framework sizes this icon to fit within 40 x 40px
. This recipe shows you how to display icons with list items.
Copy the full code of this recipe from the code/06/list-icons
sources folder. This code can be launched using the URL http://localhost:8080/06/list-icons/main.html
.
In
main.html
, add a list with list items as shown in the following code:<div data-role='content'> <ul data-role='listview' data-theme='b' data-inset='true'> <li data-icon='star'> <a href='#'> <img src='../../resources/images/img1.png' class='ui-li-icon' alt='Lal Bagh'/> <h3 style='margin-left: 25px'>Lal Bagh, Bangalore</h3> </a> </li> <li data-icon='star'> <a href='#'> ...