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;">
GeeksforGeeks
</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: