HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
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.