Posted on by & filed under Content - Highlights and Reviews, Mobile Development.

In the jQuery Mobile: Getting the Most from List Views post I introduced list views in jQuery Mobile, but now let’s go a little further.

jQuery Mobile list views are very flexible when it comes to styling and customization. For example, you can easily add an 80×80-pixel thumbnail or a 16×16-pixel icon image to each item in a list view. This can make list views more attractive, as well as give the user some useful information about each item.

To add a thumbnail image to an item in a list view, just add an img element as the first child element inside the item’s li element. (If the li contains a link then the img element should be the first child element inside the link.) For example:

To add an icon instead of a thumbnail, give the img element a CSS class of ui-li-icon, like this:

This figure shows an example of both thumbnails and icons in a list view:


You should now have a better idea of how to add thumbnails and icons to list views in your jQuery Mobile apps.

Safari Books Online has the content you need

Here are some good jQuery Mobile resources found in Safari Books Online. If you don’t have subscription access to Safari Books Online, you can start with a free trial.

Sams Teach Yourself jQuery Mobile in 24 Hours will help you master the latest version of jQuery Mobile, even if you have no previous experience. You will be guided through every step of creating and customizing a mobile website with jQuery Mobile.
Head First Mobile Web walks you through the process of making a conventional website work on a variety smartphones and tablets (look in chapter 6 to build an example with jQuery Mobile).
HTML5 Mobile Development Cookbook will show you how to plan, build, debug and optimize mobile websites.

Start FREE 10-day trial.

About the Author

  Matt Doyle is an experienced technical author and coder who has written three well-received books on jQuery Mobile, PHP and Photoshop. He has also written articles for and on a variety of topics, including jQuery Mobile, jQuery, JavaScript, PHP, HTML and CSS. Learn more about jQuery Mobile with Matt’s comprehensive eBook, “Master Mobile Web Apps with jQuery Mobile”. It’s available for instant download at

Tags: jQuery Mobile, list views, thumbnail,

2 Responses to “jQuery Mobile Tip: Adding Thumbnails and Icons to List Views”

  1. Matt

    @Jake: I cover creating HD (retina) icons in my book, which might help:

    You can use CSS media queries to serve SD images to SD displays and HD images to HD displays – eg for icons:

    .myimage { background-image: url(SD.png); -moz-background-size: 18px 18px; -o-background-size: 18px 18px; -webkit-background-size: 18px 18px; background-size: 18px 18px; }

    @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min–moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {
    .myimage { background-image: url(HD.png); }