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-u"
My buttonRight arrow - data-icon="arrow-d"
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 buttonBy default, all icons in buttons are placed to the left of the text. This default may be overridden using the data-iconpos
attribute. 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:
DeleteYou 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. In this example, we're adding a plus (+) icon and positioning it to the right of the text with our data-
attributes on the link.
<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.