JQuery Mobile button icon

JQuery Mobile offers a set of icons to make your buttons more appealing.

1. Add an icon for the JQuery Mobile button

To add an icon to your button, use the Data-icon property: ( You can also use the Data-icon property in the <button> or <input> element.) )

<DivData-role= "page"ID= "Pageone">        <DivData-role= "Content">            <ahref="#"Data-role= "button"Data-icon= "Search">Search</a>        </Div></Div> 

Below we list some of the available icons for jQuery Mobile:

for complete information on the jquery Mobile button icon, visit the jquery Mobile icon Reference manual

2. Position of position icon

You can also specify where the icon is placed: top, right, bottom, or left. Use the Data-iconpos property to specify the position: ( by default, the icons in all buttons are placed left.) )

<DivData-role= "page"ID= "Pageone">        <DivData-role= "Content">            <P>Positioning icons:</P>            <ahref= "#link"Data-role= "button"Data-icon= "Search"Data-iconpos= "Top"Data-inline= "true">Top</a>            <ahref= "#link"Data-role= "button"Data-icon= "Search"Data-iconpos= "Right">Right</a>            <ahref= "#link"Data-role= "button"Data-icon= "Search"Data-iconpos= "Bottom">Bottom</a>            <ahref= "#link"Data-role= "button"Data-icon= "Search"Data-iconpos= "Left"Data-inline= "true">Left</a>        </Div></Div> 

3. Show Icons only

If you only need to display the icon, set Data-iconpos to "Notext":

<DivData-role= "page"ID= "Pageone">        <DivData-role= "Content">            <P>Only the icon has no text button.</P>            <P><b>Comments:</b>Move the mouse pointer over the icon to see the prompt text:</P>            <ahref= "#link"Data-role= "button"Data-icon= "Search"Data-iconpos= "Notext">Search</a>        </Div></Div>