jQuery Mobile icon

We can use the icon class to add icons on the <a> and <button> elements in jQuery Mobile and position the icons as follows:

<a href="#anylink" class="ui-btn ui-icon-refresh ui-btn-icon-left">Refresh the 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 the<input> button, you can use the data-icon attribute:

##<a href=" #anylink"

data-icon="refresh"

>Refresh the page</a>Try it

We can use the data-icon attribute on the navigation button Add icon:

<a href="#anylink"

data-icon="refresh"

>Refresh the page</a>Try it out

If you want to add an icon to the list button, you can use the data-icon attribute in <li>:

##<li
data-icon="refresh"

><a href="#">Click me</a></li>Try it

Below we list all the available icons provided by jQuery Mobile:
#ValueDescriptionIconInstance##actionalertaudioarrow-d-larrow-d-rarrow-u-larrow-u-rarrow-larrow-rRight Arrowarrow-uUp Arrowarrow-dDown ArrowbackBackbarsColumn##Try it##deleteediteye##mailMail/EnvelopeTry itminusSymbol, minus signTry itnavigationNavigationTry itphonephoneTry itpowerSwitch (On/off)

Action
Try it
Warning
Try it
Video/Audio/Speaker
Try it
Lower left corner
Try it
Lower right corner
Try it
Upper left corner
Try it
Upper right corner
Try it Click
Left Arrow ##Try it

Try it
Try it
Try it
Try it

Try it
bullets Fence
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 VERIFY TAG
Try it
clock clock
Try it
cloud 云
Try it
comment Comment
Delete (X)
Try it
edit/pencil
Try it
eye Try it
forbidden Station Mark
Try it
forward forward
Try it
gear Gear
Try it
grid Grid
Try it
heart 心/爱 sign
Try it
home Home (Homepage)
Try it
info Information
Try it
location Location/GPS
Try it
lock Lock/Padlock
Try it

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 星
Try it
tag tag
Try it
user user
Try it
video Camera
Try it



Action		Try it
Warning		Try it
Video/Audio/Speaker		Try it
Lower left corner		Try it
Lower right corner		Try it
Upper left corner		Try it
Upper right corner		Try it Click
Left Arrow		##Try it
		Try it
		Try it
		Try it
		Try it
		Try it
bullets	Fence		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	VERIFY TAG		Try it
clock	clock		Try it
cloud	云		Try it
comment	Comment
Delete (X)		Try it
edit/pencil		Try it
eye		Try it
forbidden	Station Mark		Try it
forward	forward		Try it
gear	Gear		Try it
grid	Grid		Try it
heart	心/爱 sign		Try it
home	Home (Homepage)		Try it
info	Information		Try it
location	Location/GPS		Try it
lock	Lock/Padlock		Try it




			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	星		Try it
tag	tag		Try it
user	user		Try it
video	Camera		Try it

← jQuery Mobile Data 属性

jQuery Mobile events →

jQuery Mobile icon

php.cn