How to make an Icon position Button using jQuery Mobile?

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

Last Updated : 12 Jul, 2022

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:

How to make an Icon position Button using jQuery Mobile?

V

vkash8574

Improve

Article Tags :

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

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

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=

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

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

How to create bottom 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 bottom positioned icon selects using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link r

How to make an Icon shadow 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 Icon shadow Button using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="style

How to make a Icon position Checkbox 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 an Icon position Checkbox using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€styles

How to create Icon-only 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 Icon-only positioning icon using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel=â€

How to create bottom 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 Bottom positioning icon using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel=â€sty