How to set the icon and its position in button using jQuery Mobile ? Last Updated : 12 Jul, 2022 Comments Improve Suggest changes Like Article Like Report 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: Comment More infoAdvertise with us Next Article How to set the icon and its position in button using jQuery Mobile ? V vkash8574 Follow Improve Article Tags : Web Technologies JQuery jQuery-Mobile jQuery-Questions Similar Reads How to make an Icon position Button using jQuery Mobile? jQuery Mobile is a web-based technology for creating responsive content accessible on all smartphones, tablets, and desktops. In this article, we'll show you how to create buttons with various icon positions using jQuery Mobile, enhancing your user interface with flexible and visually appealing butt 2 min read How to make a Icon position Radio Button using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Icon position Radio Button using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€sty 1 min read How to create top positioned icon selects using jQuery Mobile ? jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making top positioned icon selects using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel= 1 min read How to make Inline position of Button using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making an Inline position Button using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="s 2 min read How to create Top positioning icon using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making Top positioning icon using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel=â€styles 1 min read Like