jquery 图标

jQuery 图标的使用方法

jQuery 本身没有内置的图标库，但可以通过集成第三方图标库（如 Font Awesome、Bootstrap Icons 等）来实现图标功能。

引入 Font Awesome
在 HTML 文件中添加 Font Awesome 的 CDN 链接，即可使用其丰富的图标集：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

通过 jQuery 动态添加图标
使用 jQuery 的 append() 或 html() 方法动态插入图标：

$("#button").append('<i class="fas fa-home"></i>');

使用 Bootstrap Icons

Bootstrap Icons 是另一个流行的选择，需引入其 CSS 文件：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">

动态加载图标示例
通过 jQuery 动态切换图标：

$("#toggleIcon").click(function() {
    $(this).find("i").toggleClass("bi-star bi-star-fill");
});

自定义 SVG 图标

如果需要更高灵活性，可以加载 SVG 图标并通过 jQuery 操作：

$.get("path/to/icon.svg", function(data) {
    $("#iconContainer").html(data);
});

注意事项

• 确保第三方图标库的 CDN 或本地文件正确加载。
• 动态操作图标时，注意类名的正确性（如 Font Awesome 的 fas 和 Bootstrap Icons 的 bi）。
• 对于性能敏感场景，考虑预加载图标或使用 SVG 精灵图（Sprite）。