jQuery Mobile provides a set of icons that will make your buttons look more desirable.
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.
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:
If you do not specify the icon position for link buttons, the icon will not be shown. |
To only display the icon, use "notext" as value for icon position:
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:
By default, all icons are white. To change the icon color to black, add the "ui-alt-icon" to the element or its container:
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.