Skip to content
Related Articles

Related Articles

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

Improve Article
Save Article
  • Last Updated : 12 Jul, 2022
Improve Article
Save Article

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: 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!