JQUERY(IKON)

Icons

A set of built-in icons in jQuery Mobile can be applied to buttons, collapsibles, lists and more.

Jump to section 

Icon set

The following data-icon attributes can be referenced to create the icons shown below:

Bars - data-icon="bars"

My button 

Edit - data-icon="edit"

My button 

Left arrow - data-icon="arrow-l"

My button 

Right arrow - data-icon="arrow-r"

My button 

Up arrow - data-icon="arrow-u"

My button 

Down arrow - data-icon="arrow-d"

My button 

Delete - data-icon="delete"

My button 

Plus - data-icon="plus"

My button 

Minus - data-icon="minus"

My button 

Check - data-icon="check"

My button 

Gear - data-icon="gear"

My button 

Refresh - data-icon="refresh"

My button 

Forward - data-icon="forward"

My button 

Back - data-icon="back"

My button 

Grid - data-icon="grid"

My button 

Star - data-icon="star"

My button 

Alert - data-icon="alert"

My button 

Info - data-icon="info"

My button 

Home - data-icon="home"

My button 

Search - data-icon="search"

My button 

View Source 

Return to top 

Icon positioning

By default, all icons in buttons are placed to the left of the button text. This default may be overridden using the data-iconpos attribute to set the icon to the right, above (top) or below (bottom) the text.

Left Right Top Bottom 

View Source 

Return to top 

Icon-only positioning

You 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 titleattribute on the link to provide context for screen readers and devices that support tooltips.

Delete 

View Source 

Return to top 

Removing the disc and shadow

There is dark semi-opaque disc behind each icon to ensure good contrast when placed on any background color. If you prefer to not have this disc, it can be removed by adding the class ui-icon-nodiscto the element or its container. Setdata-iconshadow="false" to disable the icon shadow.

No disc or shadow  No disc  Standard 

View Source 

Example of the class being applied to a wrapper.

Bars  Edit  Arrow left  Arrow right  Arrow up  Arrow down  Delete Plus  Minus  Check  Gear  Refresh  Forward  Back Grid  Alert  Info  Home  Search 

View Source 

Return to top 

Black vs. white icon sets

The white vs. black icon sprite is set at the theme level but you can override which is used by adding theui-icon-alt class to the element or its container. This also changes the color that is used for the discs.

Home - Black icons, no disc  Home - Standard 

View Source 

Example of the class being applied to a wrapper.

Bars  Edit  Arrow left  Arrow right  Arrow up  Arrow down  Delete Plus  Minus  Check  Gear  Refresh  Forward  Back Grid  Alert  Info  Home  Search 

View Source 

Example of the class applied to theUL or OL to change to the black icons for each list item.

Acura

 

Audi

 

BMW

 

Cadillac

 

Ferrari

 

View Source 

Example of the class being applied to a collapsible.

Headingclick to expand contents 

View Source 

Return to top 

Custom Icons

To use custom icons, specify adata-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:ui-icon-myapp-email.

You can then write a CSS rule in your stylesheet that targets the ui-icon-myapp-email class to specify the icon background source. To maintain visual consistency with the rest of the icons, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.

In this example, we're just pointing to a standalone icon image, but you could just as easily use an icon sprite and specify the positioning instead, just like the icon sprite we use in the framework.

.ui-icon-myapp-email { background-image: url("app-icon-email.png"); }

This will create the standard resolution icon, but many devices now have very high resolution displays, like the retina display on the iPhone 4. To add a HD icon, create an icon that is 36x36 pixels (exactly double the 18 pixel size), and add second a rule that uses the -webkit-min-device-pixel-ratio: 2 media query to target a rule only to high resolution displays. Specify the background image for the HD icon file and set the background size to 18x18 pixels which will fit the 36 pixel icon into the same 18 pixel space. The media query block can wrap multiple icon rules:

@media only screen and (-webkit-min-device-pixel-ratio: 2) { .ui-icon-myapp-email { background-image: url("app-icon-email-highres.png"); background-size: 18px 18px; } ...more HD icon rules go here... } Return to top 

Icons and themes

The semi-transparent black circle behind the white icon ensures good contrast on any background color so it works well with the jQuery Mobile theming system. Here are examples of the same icons sitting on top of a range of different color swatches withthemed buttons.

Swatch "a" themed buttons

Bars  Edit  Arrow left  Arrow right  Arrow up  Arrow down  Delete Plus  Minus  Check  Gear  Refresh  Forward  Back Grid  Alert  Info  Home  Search 

View Source 

Swatch "b" themed buttons

Bars  Edit  Arrow left  Arrow right  Arrow up  Arrow down  Delete Plus  Minus  Check  Gear  Refresh  Forward  Back Grid  Alert  Info  Home  Search 

View Source 

Swatch "c" themed buttons

Bars  Edit  Arrow left  Arrow right  Arrow up  Arrow down  Delete Plus  Minus  Check  Gear  Refresh  Forward  Back Grid  Alert  Info  Home  Search 

View Source 

Swatch "d" themed buttons

Bars  Edit  Arrow left  Arrow right  Arrow up  Arrow down  Delete Plus  Minus  Check  Gear  Refresh  Forward  Back Grid  Alert  Info  Home  Search 

View Source 

Swatch "e" themed buttons

Bars  Edit  Arrow left  Arrow right  Arrow up  Arrow down  Delete Plus  Minus  Check  Gear  Refresh  Forward  Back Grid  Alert  Info  Home  Search 

View Source