CDN引入Iconify是最轻量的选择，只需在index.html的<head>中添加一行脚本链接即可使用上千图标集，按需加载SVG，不增加项目体积。
CDN 引入 Iconify 是最轻量的选择
直接在 index.html 的 <head> 里加一行 CDN 链接，就能用上上千个图标集（如 mdi、fa、tabler），不用下载、不占项目体积。Iconify 自动按需加载 SVG，比整包引入 Font Awesome 更干净。
实操建议：
- 用官方推荐的最小化 CDN：
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
- 图标写法是
<iconify-icon icon="mdi:home"></iconify-icon>，其中mdi:home是图标 ID，冒号前是图标集别名 - 首次使用某图标集时，Iconify 会自动从
https://api.iconify.design/加载对应 JSON 元数据——确保网络可访问该地址，内网或离线环境需另配本地资源 - 别用老版本
iconify@2的全局Iconify对象写法，新版统一走自定义元素，更稳定
用 <link rel="stylesheet"> 引 Font Awesome 5/6 要注意版本差异
Font Awesome 5 和 6 的 CSS 类名、图标集范围、甚至 CDN 地址都不同，混用会导致图标不显示或样式错乱。
常见错误现象：页面只显示方框、控制台报 Failed to load resource: the server responded with a status of 404 ()，大概率是图标名写错了或者 CDN 版本不匹配。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- FA6 推荐用这个链接：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
，然后写<i class="fa-solid fa-home"></i> - FA5 用：
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
，对应类名是fas fa-home或far fa-clock -
fab（品牌图标）在 FA6 中默认不包含在all.min.css里，需额外加fontawesome-brands.min.css，否则fa-github会失效
本地部署 remixicon 图标库时路径容易出错
RemixIcon 提供了完整的 SVG 字体文件和 CSS，适合离线或对 CDN 有合规要求的场景，但它的 CSS 文件依赖相对路径引用字体或 SVG sprite，挪动文件位置就容易断链。
典型问题：图标变成小方块，开发者工具看到 GET …/fonts/remixicon.woff2 net::ERR_ABORTED 404。
实操建议：
- 下载 ZIP 后解压，把整个
remixicon/目录（含fonts/和css/）放到index.html同级或明确可访问的静态目录下 - 在 HTML 中引用 CSS 时，确保路径与实际结构一致，例如：
<link rel="stylesheet" href="./remixicon/css/remixicon.css">
- 不要只复制
remixicon.css单文件——它里面用@font-face指向了../fonts/...，路径一错全盘失效 - 如果项目用构建工具（Vite/Webpack），应改用 npm 安装 +
import 'remixicon/fonts/remixicon.css'，避免手动路径管理
用 svg-sprite-loader 打包自定义 SVG 图标需要构建支持
纯静态 index.html 无法直接运行 Webpack 插件，所以这种方案只适用于已有构建流程的项目。强行在无构建环境下模仿会卡在模块解析或 require 报错。
常见错误现象：Uncaught ReferenceError: require is not defined，或图标完全不渲染。
实操建议：
- 确认你正在用 Webpack（且版本 ≥ 4）、Vite（需插件如
vite-plugin-svg-icons）或其他支持 SVG Sprite 的构建链路 - Webpack 下需配置
svg-sprite-loader替换默认file-loader，并用<svg><use xlink:href="#icon-home"></use></svg>写法调用 - Vite 用户更推荐
vite-plugin-svg-icons，配合import { createApp } from 'vue'初始化时调用createSvgIconsPlugin，无需手写<use> - 纯静态页想省事，不如直接用
<img src="icons/home.svg">或内联 SVG，简单可靠
第三方图标库真正麻烦的从来不是“怎么引”，而是“引完之后图标名对不对、路径通不通、构建链路认不认识它”。尤其当多个图标方案混用时，class 名冲突、icon 属性覆盖、CSS 优先级打架，比引入本身更耗时间。
