Latest web development tutorials

jQuery Mobile button icons

jQuery Mobile provides a set of buttons lets look more desirable icon.





Button to add icons to jQuery Mobile

We can use the class ui-icon to add an icon to the button, and the button can be set using the specified class.

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>

Note: On the other way buttons, such as a list or a form of buttons utilize data-icon attribute. In the next section we'll introduce specific.

Below we list some of the available icons jQuery Mobile provides:

Button class description Push button Examples
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 Retreat try it
ui-icon-audio speaker try it
ui-icon-lock padlock try it
ui-icon-search search for try it
ui-icon-alert caveat try it
ui-icon-grid grid try it
ui-icon-home Home try it

For a complete reference manual for all button icons jQuery Mobile, visit our jQuery Mobile icon Reference Manual .


Location icon

You can also specify an icon positioned in what position button: the top (top), right side (right), at the bottom (bottom), the left (left).

Please use the ui-btn-icon attribute to specify the location:

Icon Location:

<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 side </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 side </a>

try it"

Note If you do not specify the location of the button image, the icon will not be displayed.

Show only icon

If you want to display the icon, you can use the "notext":

Example:

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-notext"> Search </a>

try it"

Remove the circle

By default, all the icons have a gray circle. If you do not need it, you can use the element "ui-nodisc-icon" category:

Examples

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left"> use circle (default) </a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon"> remove the circle </a>

try it"

Black, white button

By default, all icons are white. If you need to change the icon color is black, you can add "ui-alt-icon" in elements:

Examples

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

Examples

More examples

Add "ui-nodisc-icon" class to the container
Example "ui-nodisc-icon" class.

Add "ui-alt-icon" class to the container
Example "ui-alt-icon" class.