jQuery Icons
To add an icon to your <a> and <button> elements in jQuery Mobile, use the icon class and position the icon as shown below (the only exception is buttons in navbars, which are shown further down):
<a href="#anylink" class="ui-btn ui-icon-refresh ui-btn-icon-left">Refresh Page</a>
Try it
<button class="ui-btn ui-icon-refresh ui-btn-icon-left">Refresh Page</button>
Try it
To add an icon to your <input> buttons, use the data-icon attribute:
<input type="button" value="Refresh page" data-icon="refresh">
Try it
To add an icon to your navbar buttons, use the data-icon attribute:
<a href="#anylink" data-icon="refresh">Refresh Page</a>
Try it
To add an icon to your list buttons, use the data-icon attribute on <li>:
<li data-icon="refresh"><a href="#">Click me</a></li>
Try it
Below we have listed all available icons that jQuery Mobile provides:
| Value | Description | Icon | Example |
|---|---|---|---|
| action | Action (arrow pointing clockwise out of a box) | Try it | |
| alert | alert | Try it | |
| audio | Audio / Sound / Speakers | Try it | |
| arrow-d-l | Arrow pointing downwards to the left | Try it | |
| arrow-d-r | Arrow pointing downwards to the right | Try it | |
| arrow-u-l | Arrow pointing upwards to the left | Try it | |
| arrow-u-r | Arrow pointing upwards to the right | Try it | |
| arrow-l | Arrow pointing left | Try it | |
| arrow-r | Arrow pointing right | Try it | |
| arrow-u | Arrow pointing up | Try it | |
| arrow-d | Arrow pointing down | Try it | |
| back | Back (curved arrow pointing counterclockwise upwards) | Try it | |
| bars | Bars (three horizontal bars over each other) | Try it | |
| bullets | Bullets (three horizontal bullets over each other) | Try it | |
| calendar | calendar | Try it | |
| camera | camera | Try it | |
| carat-d | Carat pointing down | Try it | |
| carat-l | Carat pointing left | Try it | |
| carat-r | Carat pointing right | Try it | |
| carat-u | Carat pointing up | Try it | |
| check | Checkmark | Try it | |
| clock | clock | Try it | |
| cloud | cloud | Try it | |
| comment | comment | Try it | |
| delete | Delete (X) | Try it | |
| edit | Edit / Pencil | Try it | |
| eye | eye | Try it | |
| forbidden | Forbidden sign | Try it | |
| forward | forward | Try it | |
| gear | gear | Try it | |
| grid | grid | Try it | |
| heart | Heart / Love symbol | Try it | |
| home | home | Try it | |
| info | Information | Try it | |
| location | Location / GPS | Try it | |
| lock | Lock / Padlock | Try it | |
| Mail / Letter | Try it | ||
| minus | minus | Try it | |
| navigation | navigation | Try it | |
| phone | Telephone | Try it | |
| power | Power (On/off) | Try it | |
| plus | plus | Try it | |
| recycle | recycle | Try it | |
| refresh | refresh | Try it | |
| search | search | Try it | |
| shop | Shop / Pag / Purse | Try it | |
| star | star | Try it | |
| tag | tag | Try it | |
| user | User / Person | Try it | |
| video | Video Camera | Try it |