WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

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
action Action (arrow pointing clockwise out of a box)
alert Alert
audio Audio / Sound / Speakers
arrow-d-l Arrow pointing downwards to the left
arrow-d-r Arrow pointing downwards to the right
arrow-u-l Arrow pointing upwards to the left
arrow-u-r Arrow pointing upwards to the right
arrow-l Arrow pointing left
arrow-r Arrow pointing right
arrow-u Arrow pointing up
arrow-d Arrow pointing down
back Back (curved arrow pointing counterclockwise upwards)
bars Bars (three horizontal bars over each other)
bullets Bullets (three horizontal bullets over each other)
calendar Calendar
camera Camera
carat-d Carat pointing down
carat-l Carat pointing left
carat-r Carat pointing right
carat-u Carat pointing up
check Checkmark
clock Clock
cloud Cloud
comment Comment
delete Delete (X)
edit Edit / Pencil
eye Eye
forbidden Forbidden sign
forward Forward
gear Gear
grid Grid
heart Heart / Love symbol
home Home
info Information
location Location / GPS
lock Lock / Padlock
mail Mail / Letter
minus Minus
navigation Navigation
phone Telephone
power Power (On/off)
plus Plus
recycle Recycle
refresh Refresh
search Search
shop Shop / Pag / Purse
star Star
tag Tag
user User / Person
video Video Camera