jquery 图标

以下是关于 jQuery 图标的几种常见实现方法和资源整理：

使用 jQuery UI 内置图标

jQuery UI 提供了一套内置的图标集，可通过 CSS 类直接调用。例如显示一个三角形图标：

<span class="ui-icon ui-icon-triangle-1-e"></span>

需引入 jQuery UI 的 CSS 文件：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

集成 Font Awesome

Font Awesome 是流行的图标库，与 jQuery 配合使用时可通过动态添加类名实现：

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

需在头部引入 Font Awesome：

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

使用 jQuery 操作 SVG 图标

通过 jQuery 动态加载或操作 SVG 图标：

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

动态切换图标状态

实现点击按钮切换图标的常见模式：

$(".toggle-icon").click(function() {
  $(this).find("i")
    .toggleClass("fa-star fa-star-o");
});

注意事项

• 图标库的 CSS 文件需在 jQuery 代码前加载
• 使用 CDN 时注意检查资源 URL 的版本更新
• 动态生成的图标元素需要事件委托处理：

  $(document).on("click", ".dynamic-icon", function() {
  // 事件处理逻辑
  });

以上方法可根据项目需求选择，jQuery UI 适合基础交互图标，Font Awesome 提供更丰富的选择，SVG 则适用于需要高保真缩放场景。