The best jQuery Mobile button icons Tutorial In 2024, In this tutorial you can learn Button to add icons to jQuery Mobile,Location icon,Icon Location:,Show only icon,Example:,Remove the circle,Examples,Black, white button,Examples,More examples,
jQuery Mobile provides a set of buttons lets look more desirable icon.
We can use the class ui-icon to add an icon to the button, and the button can be set using the specified class.
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
Note: On the other way buttons, such as a list or a form of buttons utilize data-icon attribute. In the next section we'll introduce specific.
Below we list some of the available icons jQuery Mobile provides:
Button class | description | Push button | Examples |
---|---|---|---|
ui-icon-arrow-l | Left Arrow | try it | |
ui-icon-arrow-r | Right arrow | try it | |
ui-icon-info | information | try it | |
ui-icon-delete | delete | try it | |
ui-icon-back | Retreat | try it | |
ui-icon-audio | speaker | try it | |
ui-icon-lock | padlock | try it | |
ui-icon-search | search for | try it | |
ui-icon-alert | caveat | try it | |
ui-icon-grid | grid | try it | |
ui-icon-home | Home | try it |
For a complete reference manual for all button icons jQuery Mobile, visit our jQuery Mobile icon Reference Manual .
You can also specify an icon positioned in what position button: the top (top), right side (right), at the bottom (bottom), the left (left).
Please use the ui-btn-icon attribute to specify the location:
If you do not specify the location of the button image, the icon will not be displayed. |
If you want to display the icon, you can use the "notext":
By default, all the icons have a gray circle. If you do not need it, you can use the element "ui-nodisc-icon" category:
By default, all icons are white. If you need to change the icon color is black, you can add "ui-alt-icon" in elements:
Add "ui-nodisc-icon" class to the container
Example "ui-nodisc-icon" class.
Add "ui-alt-icon" class to the container
Example "ui-alt-icon" class.