How to set the icon and its position in button using jQuery Mobile ?
In this article, we will see how to set the icon and icon position in the button using jQuery Mobile. jQuery Mobile is an HTML5 based user interface system designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices.
Here, we use ui-btn ui-icon-name ui-btn-icon-position classes to set the icon and icon position in web page. The description of classes are given below:
- ui-btn: This class is used to create a button.
- ui-icon-name: This class is used to create the icon, here we replace name with icon-name. For example – ui-icon-star.
- ui-btn-icon-position: This class is used to set the position of icon in button. Here we replace position with position name like left, right, top, etc.
Example:
HTML
<!DOCTYPE html> < html > < head > < title > How to set the icon and icon position in the button ? </ title > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = "//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" > < script src = "//code.jquery.com/jquery-1.10.2.min.js" > </ script > < script src = "//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js" > </ script > </ head > < body > < div data-role = "page" id = "page1" > < div data-role = "header" > < h1 style = "color:green;" > w3wiki </ h1 > < h2 > How to set the icon and icon position in the button ? </ h2 > </ div > < a href = "#" class="ui-btn ui-icon-edit ui-btn-icon-left">Left</ a > < a href = "#" class="ui-btn ui-icon-delete ui-btn-icon-right">Right</ a > < a href = "#" class="ui-btn ui-icon-star ui-btn-icon-top">Top</ a > < a href = "#" class="ui-btn ui-icon-home ui-btn-icon-bottom">Bottom</ a > < a href = "#" class="ui-btn ui-icon-bars ui-btn-icon-notext">Icon only</ a > </ div > </ body > </ html > |
Output: