WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

jQuery Mobile Button Icons


jQuery Mobile gives a lot of symbols that will make your catches look more desirable.


Adding Icons to jQuery Mobile Buttons

To add a symbol to your catch, utilize the ui-symbol class, and position the symbol with a symbol position class (ui-btn-icon-pos):

<a href="#anylink" class="ui-btn ui-symbol seek ui-btn-symbol left">Search</a>

Note: For different catches, similar to catches in rundown sees and frames, you should utilize the information symbol characteristic. This will be clarified in a later chapter.

Below we have recorded some accessible symbols that jQuery Mobile provide:

Icon class Description Icon Example
ui-symbol bolt l Left Arrow
ui-symbol bolt r Right Arrow
ui-symbol info Information
ui-symbol delete Delete
ui-symbol back Back
ui-symbol audio Speakers
ui-symbol lock Padlock
ui-symbol search Search
ui-symbol alert Alert
ui-symbol grid Grid
ui-symbol home Home

Positioning Icons

You can determine one of four qualities for where the symbol ought to be situated in the catch: top, right, base or left.

Use the ui-btn-symbol class to determine the position:

Icon Position for Link Buttons

<a href="#anylink" class="ui-btn ui-symbol seek ui-btn-symbol top">Top</a>
<a href="#anylink" class="ui-btn ui-symbol seek ui-btn-symbol right">Right</a>
<a href="#anylink" class="ui-btn ui-symbol look ui-btn-symbol bottom">Bottom</a>
<a href="#anylink" class="ui-btn ui-symbol seek ui-btn-symbol left">Left</a>
Try it yourself »


Displaying Only The Icon

To just showcase the symbol, use "notext" as incentive for symbol position:

Example

<a href="#anylink" class="ui-btn ui-symbol look ui-btn-symbol notext">Search</a>
Try it yourself »

Removing The Circle

By default, all symbols have a dim hover (circle) around them. To evacuate the circle, include the "ui-nodisc-icon" class to the component or its container:

Example

<a href="#anylink" class="ui-btn ui-symbol seek ui-btn-symbol left">With circle (default)</a>
<a href="#anylink" class="ui-btn ui-symbol look ui-btn-symbol left ui-nodisc-icon">Without circle</a>
Try it yourself »

Black or White Icons

By default, all symbols are white. To change the symbol shading to dark, include the "ui-alt-icon" to the component or its container:

Example

<a href="#anylink" class="ui-btn ui-symbol seek ui-btn-symbol left">White</a>
<a href="#anylink" class="ui-btn ui-symbol look ui-btn-symbol left ui-alt-icon">Black</a>
Try it yourself »