WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

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
ui-icon-arrow-r Right Arrow
ui-icon-info Information
ui-icon-delete Delete
ui-icon-back Back
ui-icon-audio Speakers
ui-icon-lock Padlock
ui-icon-search Search
ui-icon-alert Alert
ui-icon-grid Grid
ui-icon-home Home

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 »


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 »