如何在 jQuery UI 中删除图标周围的灰色圆圈？

在本文中，我们将学习如何在 jQuery UI 中移除圆形图标周围的灰色圆圈，并通过示例了解它们的实现。这个任务可以通过使用ui-nodisc-icon类来完成。

jQuery UI 是一组系统组织的用户界面交互、效果、小部件和主题，构建在 jQuery JavaScript 库之上。 jQuery UI 提供了许多图标，可用于通过元素实现类名。图标是表达基本特征的符号表示。图标后面的半透明黑圈增强了网站的整体用户体验。如果不喜欢，也可以通过将ui-nodisc-icon类指定给元素或其容器来删除此圆盘。例如，第一个图像包含带有灰色圆盘的汉堡包。应用指定的类后，半透明的黑圈被删除了。

带灰圈

无灰圈

句法：

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

这些图标还可以集成到许多 jQuery UI 的小部件中，即手风琴、按钮、菜单。

方法：

• 将以下 CDN 链接添加到 HTML 页面：

• 使用按钮创建一个禁止图标，并将类 ui-icon-forbidden 用于按钮。
• 使用 ui-nodisc-icon 类删除图标周围的灰色圆圈。

示例 1：此示例描述了带有灰色圆圈的 jQuery Icon 类。

解释：这里， 我们创建了一个类为ui-icon-forbidden的按钮来获取禁止图标。我们还在按钮上使用了一些 CSS 使其透明，并将按钮的边框设置为 0。默认情况下，创建的图标周围会有一个灰色圆圈。

输出：

带灰圈

现在，我们将看到没有灰色圆圈的图标。我们创建了一个类为ui-icon-forbidden的按钮来获取禁止图标，除此之外，我们还在按钮上使用了一些 CSS 使其透明并将按钮的边框设置为 0。要删除图标周围的灰色圆圈，我们使用了ui-nodisc-icon类，该类将删除图标周围的灰色圆圈。

示例 2：此示例描述了没有灰色圆圈的 jQuery Icon 类。

HTML

  

    jQuery UI Icons
    
    
    
    
    
    
        .btntrans {
            background-color: #dd3355;
            border: 0;
            box-shadow: none;
        }
          
        .container {
            padding-top: 25px;
            height: 70px;
            background-color: #DD3355;
        }
    


    
        
        
    

输出：

无灰圈