jQuery Mobile Button Icons
jQuery Mobile provides a set of icons that make buttons look more appealing.
Adding Icons to jQuery Mobile Buttons
We can add icons to buttons using the ui-icon class and specify the position of the icon using designated classes.
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
Note: For buttons in other contexts, such as lists or forms, use the data-icon attribute. We will cover this in detail in the following sections.
Below are some of the available icons provided by jQuery Mobile:
| Button Class | Description | Button | Example |
|---|---|---|---|
| ui-icon-arrow-l | Left Arrow | Try it | |
| ui-icon-arrow-r | Right Arrow | Try it | |
| ui-icon-info | Information | Try it | |
| ui-icon-delete | Delete | Try it | |
| ui-icon-back | Back | Try it | |
| ui-icon-audio | Speaker | Try it | |
| ui-icon-lock | Lock | Try it | |
| ui-icon-search | Search | Try it | |
| ui-icon-alert | Alert | Try it | |
| ui-icon-grid | Grid | Try it | |
| ui-icon-home | Home | Try it |
For a complete reference of all jQuery Mobile button icons, visit our jQuery Mobile Icons Reference.
Positioning Icons
You can also specify where the icon should be positioned on the button: top, right, bottom, left.
Use the ui-btn-icon attribute to specify the position:
Icon Positions:
<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>
| | If you do not specify the position of the button image, the icon will not display. | | --- | --- |
Displaying Only the Icon
If you want to display only the icon, you can use "notext":
Example:
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-notext">Search</a>
Removing the Circle
By default, all icons have a gray circle. If you do not need it, you can use the "ui-nodisc-icon" class on the element:
Example:
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">With Circle (Default)</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon">Without Circle</a>
Black and White Buttons
By default, all icons are white. If you need to change the icon color to black, add "ui-alt-icon" to the element:
Example:
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">White</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon">Black</a>