Barry's jQuery Mobile Demos: Icons

Icons

jQuery Mobile provides a large selection of icons that you can use to make your pages more user friendly. We will first look at how to use icons and then we will show you some them.

Icons on buttons

We add an icon to the display area of a button by specifyng the jQuery Mobile icon name in the button's class attribute. For example, if we wanted to add the Alert icon to a button we can add the ui-icon-alert string to the class attribute of the button definition. We also have to specify where the icon should appear relative to the text on the button. This is achieved by using ui-btn-icon-left, ui-btn-icon-right, ui-btn-icon-top or ui-btn-icon-bottom. For example, the following code:

<a href="#" class="ui-btn ui-icon-alert ui-btn-icon-left">Example</a>

will produce this in-line button

Example

We can demonstrate the icon positioning for all for locations in in-line buttons as follows.

Changing the appearance of icons

We also change the way icons appear. First notice how the icons have a circle surrounding them. This circle can be removed by using the string ui-nodisc-icon in the class attribute. For example, the following button definition has an Alert icon with the circle removed.

<a href="#" class="ui-btn ui-btn-inline ui-icon-alert ui-btn-icon-left ui-nodisc-icon">Example</a>

will produce this in-line button Example

Secondly, we can use an alternate colour scheme for the icon. We can use a black on white scheme as an alternate to the default white on grey by using the string ui-alt-icon in the class attribute. For example, the following button definition uses the alternative colour scheme.

<a href="#" class="ui-btn ui-btn-inline ui-icon-alert ui-btn-icon-left ui-alt-icon">Example</a>

will produce this in-line button Example

Just the icon

Somtimes , the icon will be sufficient for the user to understand your page. We can remove all text from a button leaving just the icon by specifying the string ui-btn-notext in the class attribute. For example, the following button definition has an Alert icon with no text.

<a href="#" class="ui-btn ui-btn-inline ui-icon-alert ui-btn-icon-notext">Example</a>

will produce this in-line button Example (Notice that even though text is supplied, it does not appear on the button.)

We can improve the appearance of the icon button by using some of the button options. By rounding the corners of the button we change the shape:

<a href="#" class="ui-btn ui-btn-inline ui-corner-all ui-icon-alert ui-btn-icon-notext">Example</a>

will produce this in-line button Example

As usual, we can use combination of the options we have seen so far for icons and buttons. For example, we can round corners, add a shadow, remove the circle and use the alternate colour scheem by using the definition:

<a href="#" class="ui-btn ui-btn-inline ui-corner-all ui-shadow ui-icon-alert ui-btn-icon-notext ui-nodisc-icon ui-alt-icon">Example</a>

will produce this in-line button Example

Icons provided

The final thing to look at is the collection of icons that are supplied by jQuery Mobile. The following table shows some common icons.

Value Description Icon
ui-icon-alert Alert
ui-icon-back Back
ui-icon-check Check
ui-icon-delete Delete
ui-icon-home Home
ui-icon-info Information

There are many other icons. You can see the complete list in various places, e.g. at W3Schools jQuery Mobile icon list.

Home

go back to main page.

Example dialog

Close the dialog

Click above link or X button to close the dialog

Example dialog 2

Close the dialog and go back to place we started from

Click above link or X button to close the dialog