jQuery Mobile button icon

jQuery Mobile provides a set of icons that make buttons look more desirable.

Add icon to jQuery Mobile button

We can use the ui-icon class to add the icon to the button, and can use the specified class to set the button position.

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>

Note: On buttons in other ways, such as buttons in lists or forms, you need to use the data-icon attribute. We will introduce it in detail in the following chapters.

Below we list some of the available icons provided by jQuery Mobile:

##ui-icon-deleteDelete Try Take a momentui-icon-backBack Speaker #Try itui-icon-home首页

Button Class

Description

Button

Instance

ui-icon-arrow-l

left arrow

## Try

# ui-ICon-Row-R

# Right arrow

Try it

#ui-icon-audio

ui-icon-lock

Padlock

Try it

ui-icon -search

Try it

ui-icon-alert

Warning

For a complete reference manual of all jQuery Mobile button icons, visit our jQuery Mobile Icons Reference Manual.

Position icon

You can also specify where the icon is positioned on the button: top, right, bottom, left .

Please use the ui-btn-icon attribute to specify the location:

The location of the icon:

Example

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top">顶部</a>
<a href="#anylink"  class="ui-btn ui-icon-search ui-btn-icon-right">右侧</a>
<a href="#anylink"  class="ui-btn ui-icon-search ui-btn-icon-bottom">底部</a>
<a href="#anylink"  class="ui-btn ui-icon-search ui-btn-icon-left">左侧</a>

Run instance»

Click the "Run instance" button to view the online instance

	If you do not specify the location of the button image, the icon will not be displayed.

Only display icons

If you only want to display icons, you can use "notext":

Example

<a href="#anylink" class="ui-btn ui-icon-search  ui-btn-icon-notext">搜索</a>

Run instance»

Click the "Run instance" button to view the online instance

Remove Circle

By default, all icons have a gray circle. If you don't need it, you can use the "ui-nodisc-icon" class in the element:

Example

<a href="#anylink" class="ui-btn ui-icon-search  ui-btn-icon-left">使用圆圈 (默认)</a>

<a href="#anylink" class="ui-btn ui-icon-search  ui-btn-icon-left ui-nodisc-icon">去掉圆圈</a>

Run Example»

Click the "Run Instance" button to view the online instance

Black and white buttons

By default, all icons are white. If you need to change the icon color to black, you can add "ui-alt-icon" to the element:

Example

<a href="#anylink" class="ui-btn ui-icon-search  ui-btn-icon-left">白色</a>

<a href="#anylink" class="ui-btn ui-icon-search  ui-btn-icon-left ui-alt-icon">黑色</a>

Run Example»

Click the "Run Instance" button to view the online instance