jQuery Mobile Icons
We can use icon classes to add icons to <a> and <button> elements in jQuery Mobile, and position the icons, as follows:
<a href="../index.html" 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 an <input> button, you can use the data-icon attribute:
<a href="../index.html" data-icon="refresh">Refresh page</a>Try it
We can use the data-icon attribute to add icons to navigation buttons:
<a href="../index.html" data-icon="refresh">Refresh page</a>Try it
To add an icon to a list button, you can use the data-icon attribute inside <li>:
<li data-icon="refresh"><a href="../index.html">Click me</a></li>Try it
Below we list all available icons provided by jQuery Mobile:
| Value | Description | Icon | Example |
|---|---|---|---|
| action | Action | Try it | |
| alert | Warning | Try it | |
| audio | Video / Audio / Speaker | Try it | |
| arrow-d-l | Bottom left | Try it | |
| arrow-d-r | Bottom right | Try it | |
| arrow-u-l | Top left | Try it | |
| arrow-u-r | Top right | Try it | |
| arrow-l | Left arrow | Try it | |
| arrow-r | Right arrow | Try it | |
| arrow-u | Up arrow | Try it | |
| arrow-d | Down arrow | Try it | |
| back | Back | Try it | |
| bars | Column | Try it | |
| bullets | Bars | Try it | |
| calendar | Calendar | Try it | |
| camera | Camera | Try it | |
| carat-d | Down | Try it | |
| carat-l | Left | Try it | |
| carat-r | Right | Try it | |
| carat-u | 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 sign | Try it | |
| home | Home (Homepage) | Try it | |
| info | Info | Try it | |
| location | Location / GPS | Try it | |
| lock | Lock / Padlock | Try it | |
| Mail / Envelope | Try it | ||
| minus | Sign, Minus | Try it | |
| navigation | Navigation | Try it | |
| phone | Phone | Try it | |
| power | Switch (On/off) | Try it | |
| plus | Plus | Try it | |
| recycle | Recycle | Try it | |
| refresh | Refresh | Try it | |
| search | Search | Try it | |
| shop | Shop, Wallet, Handbag | Try it | |
| star | Star | Try it | |
| tag | Tag | Try it | |
| user | User | Try it | |
| video | Video camera | Try it |