jQuery Mobile Button Icons

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

Add Icons to jQuery Mobile Buttons

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

<a href="../index.html" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>

Note:For buttons in other contexts, such as buttons in lists or forms, the data-icon attribute is required. We will cover this in detail in the following chapters.

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

Button Class	Description	Example
ui-icon-arrow-l	Left arrow	Try it Yourself
ui-icon-arrow-r	Right arrow	Try it Yourself
ui-icon-info	Info	Try it Yourself
ui-icon-delete	Delete	Try it Yourself
ui-icon-back	Back	Try it Yourself
ui-icon-audio	Speaker	Try it Yourself
ui-icon-lock	Padlock	Try it Yourself
ui-icon-search	Search	Try it Yourself
ui-icon-alert	Alert	Try it Yourself
ui-icon-grid	Grid	Try it Yourself
ui-icon-home	Home	Try it Yourself

For the complete reference of all jQuery Mobile button icons, please visit ourjQuery Mobile Icons Reference Manual。

Positioning Icons

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 position:

Icon position:

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top">Top</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-right">Right</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-bottom">Bottom</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Left</a>

Try it Yourself »

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

Display Icon Only

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

Example:

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

Try it Yourself »

Remove the Circle

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

Example

<a href="../index.html" class="ui-btn ui-icon-search ui-btn-icon-left">Use circle (default)</a>
<a href="../index.html" class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon">Remove circle</a>

Try it Yourself »

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="../index.html" class="ui-btn ui-icon-search ui-btn-icon-left">White</a>
<a href="../index.html" class="ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon">Black</a>

Try it Yourself »