jQuery Mobile button icon
May 21, 2021 jQuery Mobile
Table of contents
jQuery Mobile button icon
jQuery Mobile offers a set of icons that make buttons look better. With these icons, you can clearly see what the button does.
Add an icon to the jQuery Mobile button
To add an icon to your button, use the data-icon property:
Tip: You can also use the data-icon property on the element of the .lt;button> or .lt;input>
Here are some of the icons available from jQuery Mobile:
| Attribute value | describe | icon | Example |
|---|---|---|---|
| data-icon="arrow-l" | Left arrow |
|
try it |
| data-icon="arrow-r" | Right arrow |
|
try it |
| data-icon="delete" | delete |
|
try it |
| data-icon="info" | information |
|
try it |
| data-icon="home" | front page |
|
try it |
| data-icon="back" | Retreat |
|
try it |
| data-icon="search" | search |
|
try it |
| data-icon="grid" | grid |
|
try it |
To view the full reference manual for all jQuery Mobile button icons, visit our jQuery Mobile icon reference manual.
Position the icon
You can also specify where the icon is positioned on the button: top, right, bottom, left.
Use the data-iconpos property to specify the location:
The location of the icon:
<a href="#link" data-role="button" data-icon="search" data-iconpos="right" > Right side </A>
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom" > Bottom </A>
<a href="#link" data-role="button" data-icon="search" data-iconpos="left" > Left side </A>
Try it out . . .
|
By default, all button icons are placed to the left. |
|---|
Only icons are displayed
If you only want to display icons, set data-iconpos to "notext":
Back off:
Try it out . . .
Remove the circle
You'll find that by default, all jQuery Mobile button icons have a gray circle. You can remove it using the "ui-nodisc-icon" class: