How to remove grey circle around the icon in jQuery UI ?

Last Updated : 28 Feb, 2022

In this article, we will learn to remove the grey circle around the circular shape-icons in jQuery UI, along with knowing their implementation through the examples. This task can be accomplished by making use of the ui-nodisc-icon class.

jQuery UI is a systematically organized set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. The jQuery UI provides a number of icons that can be utilized to implement the class names with the elements. Icons are the symbolic representation to express the essential characteristics. The semi-transparent dark circle behind the icon enhances the overall user experience of the website. This circular disc can also be removed by specifying the ui-nodisc-icon class to the element or its container if it is not preferred. For instance, the first image contains the hamburger with the grey circular disc. After applying the specified class, the semi-transparent dark circle got removed.

With Grey Circle

Without Grey Circle

Syntax:

.ui-icon-{icon type}-{icon sub description}-{direction}

The icons can also be integrated into a number of jQuery UI’s widgets, ie., accordion, button, menu.

Approach:

Add the below CDN links to the HTML page:

<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css” />
<script src=”http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js”></script>
<script src=”https://code.jquery.com/ui/1.11.4/jquery-ui.min.js” integrity=”sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=” crossorigin=”anonymous”>
</script>

Create a forbidden icon using the button and use the class ui-icon-forbidden to the button.
Use the ui-nodisc-icon class to remove the grey circle around the icons.

Example 1: This example describes the jQuery Icon class with a grey circle.

HTML

<html> 
  
<head> 
    <title>jQuery UI Icons</title> 
    <link rel="stylesheet" href= 
"http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
    <script src= 
"http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> 
    </script> 
    <script src= 
"https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" 
            integrity= 
"sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" 
            crossorigin="anonymous"> 
    </script> 
    <style> 
        .btntrans { 
            background-color: #dd3355; 
            border: 0; 
            box-shadow: none; 
        } 
          
        .container { 
            padding-top: 25px; 
            height: 70px; 
            background-color: #DD3355; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container"> 
        <button class= "ui-btn btntrans 
                        ui-shadow  
                        ui-corner-all  
                        ui-btn-icon-left  
                        ui-icon-forbidden 
                        ui-btn-icon-notext  
                        ui-corner-all"> 
        </button> 
    </div> 
</body> 
  
</html>

Explanation: Here, we have created a button with the class as ui-icon-forbidden to get the forbidden icon. We have also used some CSS on the button to make it transparent and set the border of a button as 0. By default, the icon created will have a grey circle around it.

Output:

With Grey Circle

Now, we will see the icon without a grey circle. We have created a button with the class as ui-icon-forbidden to get the forbidden icon, along with that, we have also used some CSS on the button to make it transparent and set the border of the button as 0. To remove the grey circle around the icon, we have used the ui-nodisc-icon class, this class will remove the grey circle around the icons.

Example 2: This example describes the jQuery Icon class without a grey circle.

HTML

<html> 
  
<head> 
    <title>jQuery UI Icons</title> 
    <link rel="stylesheet" href= 
"http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
    <script src= 
"http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> 
    </script> 
    <script src= 
"https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" 
            integrity= 
"sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" 
            crossorigin="anonymous"> 
    </script> 
    <style> 
        .btntrans { 
            background-color: #dd3355; 
            border: 0; 
            box-shadow: none; 
        } 
          
        .container { 
            padding-top: 25px; 
            height: 70px; 
            background-color: #DD3355; 
        } 
    </style> 
</head> 
<body> 
    <div class="container"> 
        <button class="ui-btn btntrans  
                       ui-shadow  
                       ui-corner-all  
                       ui-btn-icon-left  
                       ui-icon-forbidden 
                       ui-btn-icon-notext  
                       ui-nodisc-icon  
                       ui-corner-all"> 
        </button> 
    </div> 
</body> 
</html>