YouTip

* * * * * * ## jQuery Mobile List Icons By default, each list item includes a right-arrow icon ("carat-r"). To change this icon, use the `data-icon` attribute: ## Example

• Default is right arrow
• data-icon="plus"
• data-icon="minus"
• data-icon="delete"
• data-icon="location"
• data-icon="false"

[Try it yourself »](#) |  | `data-icon="false"` removes the icon. | | --- | For a complete reference of jQuery Mobile button icons, visit our (#). * * * ## 16x16 Icons To add standard 16x16px icons to your list, include an `` element inside the list item and apply the `"ui-li-icon"` class: ## Example

• USA

[Try it yourself »](#) * * * ## jQuery Mobile List Thumbnails For images larger than 16x16px, add an `` element inside the link. jQuery Mobile will automatically scale the image to 80x80px: ## Example

• 

[Try it yourself »](#) Add list information using standard HTML: ## Example

• 

  Google Chrome

  Google Chrome is a free, open-source web browser released in 2008.

[Try it yourself »](#) * * * ## jQuery Mobile List Icons Use `class="ui-li-icon"` on the `` element in a list to add a 16x16px icon: ## Example

USA

[Try it yourself »](#) * * * ## Split Buttons In jQuery Mobile lists, you may sometimes need to perform two distinct actions on a list item. In such cases, you must split the link button within the list item. To achieve this, add another `` element inside the `

` element, which will render the split effect on the page. jQuery Mobile automatically styles the second link as a blue arrow icon; any text associated with that icon (if present) will appear when the user hovers over the icon: ## Example

• Some Text

[Try it yourself »](#) Enhance link functionality by adding pages and dialogs: ## Example

• Download Browser

[Try it yourself »](#) * * * ## Badge Numbers Badge numbers display numeric values associated with list items—such as unread email counts in an inbox. To add a badge number, use an inline element like ``, assign it the class `"ui-li-count"`, and insert the desired number: ## Example

• Inbox25
• Outbox432
• Spam7

[Try it yourself »](#) **Note:** To correctly display a badge number, programmatic adjustments are required. This will be explained in later chapters. * * *  ## More Examples (#) How to create popup lists. (#) How to set the default link icon for list items (default is right arrow). (#) How to create collapsible popup lists. (#) How to create lists that show/hide content. (#) How to build a calendar.