How can I use icons in jQuery Mobile?

A set of built-in icons in jQuery Mobile can be applied to buttons, collapsibles, lists and more. Icon set The following data-iconattributes can be referenced to create the icons shown below:

Where do icons go in a button in jQuery?

By default, icons in input buttons are placed to the left of the button text. This default may be overridden using the data-iconpos attribute to set the icon position to “right”, “top”, or “bottom”. In case of link buttons or button elements you have to add an icon position class (ui-btn-icon-[value]).

How to add a mobile icon to a navbar?

To add icons to the navbar items, the data-icon attribute is used, specifying a standard mobile icon for each item. Navbars inherit the theme-swatch from their parent container. Setting the data-theme attribute to a navbar is not supported. The data-theme attribute can be set individually to the links inside a navbar.

How to use data role in jQuery Mobile?

Links with data-role=”button”. Input-based buttons, links in toolbars and button elements are auto-enhanced, no data-role required. home | delete | plus | arrow-u | arrow-d | carat-l | carat-t | carat-r | carat-b | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search

How do you set icons in jQuery widgets?

In widgets where you set the icon with a data-icon attribute you use the name of the icon as value. For example: data-icon=”arrow-r”. To add an icon to link buttons and button elements, use the name prefixed with ui-icon- as class. For example: ui-icon-arrow-r.

How to change the color of icons in jQuery?

Example of the class being applied to a wrapper. Icons are white by default but you can switch to black icons by adding the ui-alt-icon class to the element or its container. This also changes the color that is used for the discs. Example of the class being applied to a wrapper.

How to enable icon Shadow in jQuery Mobile?

Set data-iconshadow=”true” to enable icon shadow for input buttons, or add class ui-shadow-icon to your button markup. Note: Icon shadow (option iconShadow in the button widget and class ui-shadow-icon) is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0.