Skip to content
Related Articles

Related Articles

Improve Article

How to set the icon and its position in button using jQuery Mobile ?

  • Last Updated : 06 Sep, 2021
Geek Week

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 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: 




My Personal Notes arrow_drop_up
Recommended Articles
Page :