Open In App

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

Improve
Improve
Like Article
Like
Save
Share
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: 



Last Updated : 12 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads