jQuery Mobile Icons
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 |
