The jQuery Mobile framework includes a selected set of icons most often needed for mobile apps. To minimize download size, jQuery Mobile includes a single white icon sprite, and automatically adds a semi-transparent black circle behind the icon to ensure that it has good contrast on any background color.
An icon can be added to a button by adding a data-icon
attribute on the anchor specifying the icon to display. For example, the following markup:
<a href="index.html" data-role="button" data-icon="delete">Delete</a>
Creates this button with an icon:
DeleteThe following data-icon
attributes can be referenced to create the icons shown below:
Left arrow - data-icon="arrow-l"
My buttonRight arrow - data-icon="arrow-r"
My buttonUp arrow - data-icon="arrow-u"
My buttonDown arrow - data-icon="arrow-d"
My buttonDelete - data-icon="delete"
My buttonPlus - data-icon="plus"
My buttonMinus - data-icon="minus"
My buttonCheck - data-icon="check"
My buttonGear - data-icon="gear"
My buttonRefresh - data-icon="refresh"
My buttonForward - data-icon="forward"
My buttonBack - data-icon="back"
My buttonGrid - data-icon="grid"
My buttonStar - data-icon="star"
My buttonAlert - data-icon="alert"
My buttonInfo - data-icon="info"
My buttonHome - data-icon="home"
My buttonSearch - data-icon="search"
My buttonBy default, all icons in buttons are placed to the left of the button text.
DeleteThis default may be overridden using the data-iconpos
attribute to set the icon to the right, above (top) or below (bottom) the text. For example, the markup:
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>
Creates this button with right-aligned icon:
DeleteIcons can also be positioned above the text by specifying data-iconpos="top"
Or icons can also be positioned below the text by specifying data-iconpos="bottom"
You can also create an icon-only button, by setting the data-iconpos
attribute to notext
. The button plugin will hide the text on-screen, but add it as a title
attribute on the link to provide context for screen readers and devices that support tooltips. For example, replacing data-iconpos="right"
on the previous example with data-iconpos="notext"
:
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
Creates this icon-only button:
DeleteTo use custom icons, specify a data-icon
value that has a unique name like myapp-email
and the button plugin will generate a class by prefixing ui-icon-
to the data-icon
value and apply it to the button. You can then write a CSS rule that targets the ui-icon-myapp-email
class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.
The semi-transparent black circle behind the white icon ensures good contrast on any background color so it works well with the jQuery Mobile theming system. Here are examples of the same icons sitting on top of a range of different color swatches in out theme.
Swatch "A" themed buttons
Swatch "B" themed buttons
Swatch "C" themed buttons