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 =
< script src =
</ script >
< script src =
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 =
< script src =
</ script >
< script src =
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 >
|
Output:
Without Grey Circle
Share your thoughts in the comments
Please Login to comment...