最常用轻量写法是引入iconfont.css后用调用图标，需同时写基础类iconfont和专属类icon-home，且css与字体文件同目录或路径正确，html须声明utf-8编码。
直接引入 iconfont.css 并用 <i></i> 标签显示图标
最常用、最轻量的写法就是把下载好的 iconfont.css 放在项目里，通过 <link> 引入，再用带两个 class 的 <i></i> 标签调用图标。这不需要额外写 CSS，依赖的是图标库自动生成的样式规则。
关键点：必须同时写上基础类 iconfont 和图标专属类（如 icon-home），缺一不可。只写 class="icon-home" 会失效。
-
<link rel="stylesheet" href="./iconfont/iconfont.css">—— 路径要对，且确保该 CSS 文件能正常加载（检查 Network 面板中字体文件是否 200） -
<i class="iconfont icon-home"></i>—— 必须两个 class，并注意 class 名和 CSS 中定义的一致（大小写、连字符） - HTML 文件顶部必须有
<meta charset="UTF-8">，否则 Unicode 字符（如\e600）可能乱码成方块
@font-face 路径错导致图标不显示的典型表现
图标显示为空白或方块，90% 是因为 iconfont.css 里的 @font-face 中 url() 路径错了——它不是按 HTML 页面位置算的，而是按 CSS 文件自身所在目录为基准解析的。
比如 CSS 在 /css/iconfont.css，但字体文件实际放在 /fonts/iconfont.woff2，那默认就会请求 /css/iconfont.woff2，404。
- 最稳做法：把
iconfont.css和所有字体文件（.woff2、.woff、.ttf等）放在同一目录，CSS 里保持url('iconfont.woff2')不改 - 必须分开时：手动改
iconfont.css里的所有url('xxx')为相对路径，例如url('../fonts/iconfont.woff2') - 别用绝对路径
url('/fonts/iconfont.woff2')—— Vite/Webpack 开发服务器挂子路由（如/admin/）时会直接失效
Vite 或 Webpack 项目里图标在子路由下变方块的原因
开发时图标正常，部署后进 /user/list 这类子路由就全变成方块，大概率是把 iconfont 文件放到了 public/ 目录。
public/ 下的文件不会被构建工具处理，iconfont.css 里的 url() 不会被重写，打包后路径仍按开发时的相对关系硬编码，上线就错乱。
- 正确做法：把整个 iconfont 文件夹（含
iconfont.css和所有字体文件）放进src/assets/fonts/iconfont/这类源码目录 - 然后在主样式（如
main.css或App.vue的<style></style>块）里用@import "@/assets/fonts/iconfont/iconfont.css"; - 这样构建器能识别并自动修正所有内部
url()的路径，子路由下也稳定
用伪元素手动写图标内容时容易漏掉的三件事
不用 <i class="iconfont icon-home"></i>，而选择自己写 ::before + content，看似自由，但三个条件必须同时满足才能渲染出图形：
-
font-family: 'iconfont'必须生效（不能被父级的font-family: sans-serif覆盖；用开发者工具看 computed 样式确认） -
::before { content: "\e600" }的值必须是非空字符串，且和字体文件中对应图标的 Unicode 编码一致（打开iconfont.css搜索.icon-home确认） -
@font-face加载的字体文件必须成功返回 200，且支持该 Unicode 码位（Network 面板过滤font查看）
少一个，就显示方块、空白，或退化成普通字符。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
