Open In App

jQuery Mobile Button Widget icon Option

Last Updated : 18 Apr, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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 using the jQuery Mobile Button Widget icon Option to add the icon inside the button. 

Syntax:

$("selector").button({
   icon: "icon_name"
});

CDN Link: First, add jQuery Mobile scripts needed for your project.

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

Example:

HTML




<!doctype html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <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>
 
    <script>
        $(document).ready(function () {
            $(".gfg").button({
                icon: "star"
            });
 
            $(".gfg1").button({
                icon: "edit"
            });
        });
    </script>
</head>
 
<body>
    <div data-role="page" id="page1">
        <div data-role="header">
            <h1>GeeksforGeeks</h1>
            <h3>jQuery Mobile Button Widget icon Option</h3>
        </div>
        <div role="main" class="ui-content">
            <form action="#" method="get">
                <input type="submit"
                    value="Star Icon Button" class="gfg">
                 
                <input type="button"
                    value="Edit Icon Button" class="gfg1">
            </form>
        </div>
    </div>
</body>
 
</html>


Output:

Reference: https://api.jquerymobile.com/1.4/button/#option-icon



Previous Article
Next Article

Similar Reads

jQuery Mobile Button Widget corners Option
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 using the jQuery Mobile Button Widget corners option to set the style of the button corner. This option accepts the boolean value. It sets the border radius if its value is true. Syntax:
1 min read
jQuery Mobile Button Widget iconshadow Option
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 using the jQuery Mobile Button Widget iconshadow Option to set the icon shadow in a button. This option is always used with icon option. Syntax: $("selector").button({ iconshadow : boole
1 min read
jQuery Mobile Button Widget theme Option
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 using the jQuery Mobile Button Widget theme Option to set the theme (button color) of the button. Syntax: $("selector").button({ theme: "b" }); CDN Link: First, add jQuery Mobile scripts
1 min read
jQuery Mobile Button Widget iconpos Option
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 using jQuery Mobile Button Widget iconpos Option to set the position of icon inside button. This option is always used with icon option. Its possible values are: left, right, top, bottom
1 min read
jQuery Mobile Button Widget inline Option
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 using jQuery Mobile Button Widget inline Option to set the inline property. If this option value is set to true, the button acts like an inline button i.e. the width of button is determi
1 min read
jQuery Mobile Button Widget mini Option
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 using jQuery Mobile Button Widget mini option to set the button size. If this option value is set to true, it will display the compact version of button i.e. the vertical height is minim
1 min read
jQuery Mobile Button Widget shadow Option
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 using the jQuery Mobile Button Widget shadow Option to set the shadow outside the button. Syntax: $("selector").button({ shadow: boolean }); CDN Link: First, add jQuery Mobile scripts ne
1 min read
jQuery Mobile Button Widget enhanced Option
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 using the jQuery Mobile Button Widget enhanced Option to specify the markup that necessary for a button widget. Syntax: $("selector").button({ enhanced: true }); CDN Link: First, add jQu
1 min read
jQuery Mobile Button Widget disabled Option
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 using the jQuery Mobile Button Widget disabled option to make the button enable or disabled. It accepts a boolean value. Syntax: $("selector").button({ disabled: true }); CDN Links: Firs
1 min read
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. &lt;link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.
1 min read