jQuery Mobile: List items with icons

This entry is part 49 of 73 in the series jQuery Mobile

To use standard 16×16 pixel icons in list items, add the class of ui-li-icon to the image element and insert 16×16 icons as img tags inside the list items.

<!DOCTYPE html>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
<div data-role='page'>
    <div data-role='header'><h1>Count Bubbles On List</h1></div>
    <ul data-role='listview' data-inset='true'>
        <li><a href='#'><img src='http://codecrawl.com/code/flag/gf.png' alt='France' class='ui-li-icon ui-corner-none'>France</a></li>
        <li><a href='#'><img src='http://codecrawl.com/code/flag/de.png' alt='Germany' class='ui-li-icon'>Germany</a></li>
        <li><a href='#'><img src='http://codecrawl.com/code/flag/gb.png' alt='Great Britain' class='ui-li-icon'>Great Britain</a></li>
        <li><a href='#'><img src='http://codecrawl.com/code/flag/fi.png' alt='Finland' class='ui-li-icon'>Finland</a></li>
        <li><a href='#'><img src='http://codecrawl.com/code/flag/us.png' alt='United States' class='ui-li-icon ui-corner-none'>United States</a></li>

    <div data-role='footer' data-position='fixed'>
Try The Code

In the img tag above, I have added class=’ui-li-icon’, a class that is designed for list items.

List Item Icons Output

Series Navigation<< jQuery Mobile: Count bubbles on list
jQuery Mobile: Formatted content >>

Leave a comment

Leave a Reply