最稳妥方式是直接用引入阿里iconfont官网生成的css链接，确保复制的是以.css结尾的地址而非js版，再配合正确class名（如icon-home）使用图标。
直接用 <link> 引入 CSS 文件最稳妥
阿里 Iconfont 官网生成的项目链接默认是 CSS 地址，直接在 index.html 的 里加一行 <link> 就能用，不用额外加载 JS 或处理字体文件路径。
常见错误是复制了「在线链接」里的 JS 版本（iconfont.js），结果图标不显示——JS 版本需要等 DOM 加载完、且依赖 document.write 或动态插入，容易和现代框架或异步加载冲突。
实操建议：
- 登录 iconfont.cn → 进入你的项目 → 点击「生成链接」→ 复制「CSS 链接」那一栏的地址（以
https://at.alicdn.com/t/xxxxx.css结尾） - 粘贴进
index.html的中，例如：<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4567890_abcd123.css">
- 确保该链接在所有用到图标的 HTML 文件中都存在，且放在
<style></style>或其他 CSS 引入之前（避免样式被覆盖）
class 名必须和 Iconfont 项目里定义的一致
引入 CSS 后，图标不会自动出现，得靠 class 触发。每个图标在 Iconfont 后台都有一个唯一 class 名（比如 icon-home、icon-user），这个名不是你随便起的，必须和项目中「复制代码」弹窗里显示的一致。
容易踩的坑：
- 改了图标名称但没同步更新项目，导致 class 找不到对应 Unicode 或 SVG symbol
- 复制时漏掉前缀（比如项目设置了统一前缀
myicon-，但写成了icon-home） - 用了旧版「Unicode」方式却误以为是「Symbol」方式，结果只看到方块
验证方法：打开浏览器开发者工具，检查元素，看该 <i></i> 标签是否正确加载了 font-family: 'iconfont' 和对应的 content 值。
如果要用 <use></use> 引用 SVG Symbol，得手动加 <svg></svg> 容器
Symbol 模式比 Unicode 更灵活（支持 fill、缩放、响应式），但它不是靠 CSS 自动注入的，必须先让页面里存在一个隐藏的 <svg></svg> 容器，里面包含所有图标定义。
官方提供的 Symbol 链接（如 https://at.alicdn.com/t/c/font_4567890_abcd123.js）本质是 JS 脚本，会动态创建 <svg></svg> 并插入 body 底部。但如果你禁用了 JS，或想更可控，就得手动把 Symbol 内容复制出来，放到 index.html 的 开头：
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;"><defs><symbol id="icon-home" viewbox="0 0 1024 1024">...</symbol><symbol id="icon-user" viewbox="0 0 1024 1024">...</symbol></defs></svg><!-- 其他内容 -->
然后用：
<svg class="icon"><use xlink:href="#icon-home"></use></svg>
注意：xlink:href 在 HTML5 中可简写为 href，但部分老浏览器仍需保留 xlink: 前缀；若用 Webpack/Vite 构建，更推荐用插件自动注入 Symbol，而非手写。
本地部署时，字体文件路径容易 404
如果把 Iconfont 的 CSS 和字体文件（iconfont.woff2 等）一起下载到本地，就一定要保证 CSS 里 @font-face 中的 src 路径能正确解析。默认 CSS 里写的路径是相对路径，比如：
src: url('iconfont.woff2') format('woff2');
这意味着 iconfont.woff2 必须和 CSS 文件在同一目录，或者按相对位置调整。常见问题：
- CSS 放在
css/iconfont.css，字体文件却放在fonts/iconfont.woff2，但 CSS 里没改路径 - 用
file://协议直接双击打开index.html，Chrome 会因安全策略禁止加载本地字体（报net::ERR_FILE_NOT_FOUND） - 构建工具（如 Vite）把字体自动哈希重命名了，但 CSS 里还是旧名
解决办法：要么用绝对路径（如 url('/fonts/iconfont.woff2')）并确保静态资源目录配置正确；要么干脆用 CDN 链接，避开路径问题。
字体加载失败时，图标区域通常显示为空白或小方框，检查 Network 面板看 .woff2 请求是否 404 是最快定位方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
