#

Navigation Search

- Accordion
- AJAX Navigation
- Autocomplete
- Buttons
- Checkboxes
- Collapsibles
- Controlgroup
- Dialogs
- Fixed toolbars
- Flip switch toggle
- Footer toolbar
- Form elements
- Grids
- Header toolbar
- Icons
- Links
- Listviews
- Loader overlay
- Navbar
- Navbar, persistent
- Pages
- Panels New
- Popup
- Radio buttons
- Select
- Slider, single
- Slider, dual range New
- Table, column toggle New
- Table, reflow New
- Text inputs & textarea
- Transitions
- Collapsibles
- Dynamic collapsible
- Controlgroups
- Dynamic controlgroup
- Listviews
- Grid Listview
- Autodividers Linkbar
- Autodividers Selector
- Navigation
- Backbone and Require.js example
- Redirection with server-side support
- Panels
- Panel styling
- Open panel on swipe
- Popups
- Dynamic popup
- Popup with arrow
- Responsive Tables
- Reflow: Custom styles
- Reflow: Heading groups
- Reflow: Refresh method
- Column toggle: Customization options
- Column toggle: Heading groups
- Column toggle: Refresh method
- Column toggle demo: Phone comparison
- Sliders
- Tooltip extension
- Swipe
- Swipe to navigate
- Swipe to delete list item
- Forms
- Why won't my CSS styles apply correctly to a widget?
- Updating the value of enhanced form elements does not work.
- My HTML 5 inputs look different across devices and browsers.
- My range or search inputs are being change to number/text.
- Sometimes my custom select shows as a popup other times its a dialog.
- Disabling a button does not work.
- Controls in my fixed header or footer are not responding or behave erratically.
- Pages
- Why aren't my scripts and styles loading?
- Why isn't DOM ready working for my scripts?
- How do I load a page?
- Why is only the first page of my multi page document loaded?
- I'm trying to pass query params to a page but it's not working?
- I'm trying to pass information via the hash but it's not working?
- I'm trying to use the application cache but it's not working.
- Content injected into a page is not enhanced.
- Triggering create on injected HTML does not work.
- How can I stop JQM from auto-enhancing an element?
- How can I stop JQM from enhancing a block of elements?
- How do I control page titles?
- How do I load a page?
- Events
- How do I use touch and mouse events?
- Theme and styling
- How does theming work?
- Apps
- How do I need to configure PhoneGap/Cordova?

# Icons

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

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

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

## 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 `title` attribute on the link to provide context for screen readers and devices that support tooltips.

Delete

## 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-nodisc` to the element or its container. Set `data-iconshadow="false"` to disable the icon shadow.

No disc or shadow No disc Standard

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

## 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 the `ui-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

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

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

- Acura
- Audi
- BMW
- Cadillac
- Ferrari

Example of the class being applied to a collapsible.

#### Heading

I'm the collapsible content. By default I'm closed, but you can click the header to open me.

## Custom Icons

To use custom icons, specify a `data-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...
    }

## 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 with themed 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

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

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

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

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