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):
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left">Search</a>
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-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 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
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-notext">Search</a>
Try it Yourself »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">With circle (default)</a>
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left ui-nodisc-icon">Without circle</a>
Try it Yourself »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">White</a>
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left ui-alt-icon">Black</a>
Try it Yourself »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.