Latest web development tutorials
 

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):

<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.