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 Howto-Code.com. With over 10 years of experience in programming. William Pham is fluent in several programming languages, including Python, PHP, JavaScript, Java, C++.