How to create Icon-only positioning icon using jQuery Mobile ?

In jQuery Mobile, we can create an icon-only button by adding the data-icon attribute to the button element and setting its value to the desired icon name. To position the icon, we can use the data-iconpos attribute and set its value to notext.

Here's an example of creating an icon-only button with the home icon positioned at the center:

<a href="#" data-role="button" data-icon="home" data-iconpos="notext"></a>

Alternatively, we can also use the ui-btn-icon-notext class to achieve the same result:

<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-home"></a>

Both of these methods will create a button with only the home icon displayed and positioned at the center.

About the author

William Pham is the Admin and primary author of With over 10 years of experience in programming. William Pham is fluent in several programming languages, including Python, PHP, JavaScript, Java, C++.