图标字体不显示主因是@font-face中url()路径相对于css文件位置而非html；应检查network面板字体请求是否404，确保字体与css同目录或使用正确相对路径（如../fonts/xxx），并验证font-family、content值及utf-8编码。
图标字体不显示，90% 是 iconfont.css 里 @font-face 的字体路径错了，不是 HTML 页面位置决定的，而是相对于 CSS 文件本身的位置。
iconfont.css 中的 url() 路径为什么总 404
浏览器加载字体文件时，url('iconfont.woff2') 这个路径是按 iconfont.css 所在目录为基准解析的。比如 CSS 在 /css/iconfont.css，但字体实际放在 /fonts/iconfont.woff2，那默认路径就会请求 /css/iconfont.woff2，自然 404。
- 最稳做法：把
iconfont.css和所有字体文件（iconfont.woff2、iconfont.woff等）放在同一目录，CSS 里保持原样url('iconfont.woff2')就行 - 必须分开时：打开
iconfont.css，把所有url('...')改成相对路径，例如url('../fonts/iconfont.woff2') - 别写
url('/fonts/iconfont.woff2')这种绝对路径——本地开发服务器（如 Vite）挂子路径（localhost:3000/admin/）时会直接失效 - 检查 Network 面板过滤
font，看iconfont.woff2是否返回 200；404 就说明路径没对上
为啥显示方块或空白
图标渲染依赖三者同时成立：font-family: 'iconfont' 生效、.icon-home::before { content: "\e600" } 存在且非空、@font-face 加载的字体能把 \e600 渲染成图形。缺一不可。
- 打开
iconfont.css，搜索.icon-home，确认它有定义，且content值类似"\e600"（不是空字符串或注释掉） - 用开发者工具选中
<i></i>元素，在 Styles 面板看 computed 的font-family是否包含'iconfont'；如果被父级的font-family: sans-serif覆盖，字符就会降级成方块 -
<meta charset="UTF-8">必须存在，否则 Unicode 字符可能乱码 - 别只写
class="icon-home"——iconfont是基础类，负责挂载字体族；两个 class 缺一不可
Vite / Webpack 项目里 iconfont 放 public 目录会出什么问题
放在 public/ 下的文件不会被构建工具处理，iconfont.css 里的 url() 不会被重写，导致打包后路径错乱，开发时正常、上线就全变方块。
- 典型表现：子路由（如
/admin/user）下图标 404，或只在根路径/下能用 - 正确做法：把整个 iconfont 文件夹（含 CSS 和字体文件）放进
src/assets/fonts/这类源码目录 - 然后在主样式（如
main.css或App.vue的 style 块）里用@import "@/assets/fonts/iconfont/iconfont.css"; - 这样构建器能识别并自动修正所有内部
url()的路径
真正卡住人的从来不是“怎么写”，而是路径和类名之间那层隐式绑定——它不报错，只默默显示方块。每次改完记得清缓存（Ctrl+Shift+R），不然你以为修好了，其实浏览器还在用旧的 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
