如何指定(覆盖)JQuery图标颜色

要指定或覆盖 jQuery 图标的颜色，您可以使用 CSS 样式。以下是一个简单的示例，展示了如何为 jQuery 图标的颜色添加自定义样式。

首先，在 HTML 文件中包含 jQuery 和 jQuery UI 库。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>jQuery Icon Color</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
    <!-- Your HTML content here -->
</body>
</html>

接下来，在 CSS 文件中添加自定义样式。

.ui-icon {
    background-image: none !important;
}

.ui-icon-custom:before {
    content: '\f005';  /* 使用 Font Awesome 图标，例如：颜色为红色的星形图标 */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: red;
}

在 HTML 文件中应用自定义样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>jQuery Icon Color</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <style>
        .ui-icon {
            background-image: none !important;
        }

        .ui-icon-custom:before {
            content: '\f005';
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            color: red;
        }
    </style>
</head>
<body>
    <!-- Your HTML content here -->
</body>
</html>

最后，在 HTML 文件中使用自定义样式的图标。

    <span class="ui-button-icon-primary ui-icon ui-icon-custom"></span>
    <span class="ui-button-text">Custom Icon</span>
</button>

通过以上步骤，您可以为 jQuery 图标自定义颜色。

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

如何指定(覆盖)JQuery图标颜色

相关·内容

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐