jQuery Mobile Button Icons
jQuery Mobile provides a set of icons that will make your buttons look more desirable.
Adding Icons to jQuery Mobile Buttons
To add an icon to your button, use the ui-icon class, and position the icon with an icon position class (ui-btn-icon-pos):
Note: For other buttons, like buttons in list views and forms, you must use the data-icon attribute. This will be explained in a later chapter.
Below we have listed some available icons that jQuery Mobile provide:
| Icon class | Description | Icon | 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 | Speakers | Try it | |
| ui-icon-lock | Padlock | 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 the jQuery Mobile button icons, please go to our jQuery Mobile Icons Reference.
Positioning Icons
You can specify one of four values for where the icon should be positioned in the button: top, right, bottom or left.
Use the ui-btn-icon class to specify the position:
Icon Position for Link Buttons
<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 icon position for link buttons, the icon will not be shown.
Displaying Only The Icon
To only display the icon, use "notext" as value for icon position:
Example
Removing The Circle
By default, all icons have a gray circle (disc) around them. To remove the circle, add the "ui-nodisc-icon" class to the element or its container:
Example
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon">Without circle</a>
Black or White Icons
By default, all icons are white. To change the icon color to black, add the "ui-alt-icon" to the element or its container:
Example
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon">Black</a>
More Examples
Add the
"ui-nodisc-icon" class to a container
An example of the "ui-nodisc-icon" class added to a container.
Add the
"ui-alt-icon" class to a container
An example of the "ui-alt-icon" class added to a container.
