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 |