iconfont图标不显示的主因是字体路径错误或类名与CSS中content值不匹配；需确保@font-face路径相对于CSS文件、字体文件加载成功（200）、HTML类名与.icon-xxx:before{content:"\e600"}严格对应。
直接用 iconfont.css + 就能跑起来，但 90% 的问题出在字体路径没对上，或类名和 CSS 里定义的 content 值不一致。
iconfont.css 里的 @font-face 路径为什么总 404
路径是相对于 iconfont.css 文件本身的，不是 HTML 页面。比如你把 iconfont.css 放在 /css/iconfont.css，而字体文件实际在 /fonts/iconfont.woff2，那 CSS 里默认写的 url('iconfont.woff2') 就会 404。
- 最省事：把
.woff2、.woff等字体文件和iconfont.css放在同一目录，不用改路径 - 必须分开时：打开
iconfont.css，把所有url('iconfont.woff2')改成url('../fonts/iconfont/iconfont.woff2')（注意是相对 CSS 文件位置） - 别写绝对路径如
url('/fonts/iconfont.woff2')—— 本地开发常走子路径（如localhost:3000/myapp/），一部署就失效
不是代码写错了，而是字符映射断了。浏览器靠 iconfont.css 里 .icon-home::before { content: "\e600"; } 插入 Unicode 字符，再靠 @font-face 加载的字体把 \e600 渲染成图标。三者缺一不可。
- 打开
iconfont.css，搜索icon-home，确认它真有定义，且content值是非空 Unicode（如"\e600"） - 检查 DevTools 的 Network 面板，过滤
font，看iconfont.woff2是否返回 200；404 就说明字体根本没加载 - 检查 computed 样式：元素是否应用了
font-family: 'iconfont'？父元素如果设了font-family: sans-serif且没 fallback，字符会被降级显示为方块
Vite / Webpack 项目里 iconfont.css 放 public/ 目录会出什么问题
public/ 下的文件不会被构建工具处理，CSS 里的相对路径仍按原样解析，但字体文件可能被复制到不同位置，导致路径错乱。
- 别把
iconfont.css放public/后用@import引入 —— 构建时@import不会重写内部的url() - 推荐做法：把整个 iconfont 文件夹（含 CSS 和字体）放进
src/assets/fonts/iconfont/，然后在主样式中@import "@/assets/fonts/iconfont/iconfont.css" - 或者直接把
@font-face块复制进全局 CSS，手动修正所有url()路径
最容易被忽略的是：每个图标类名对应的 content 值，必须和字体文件私有区（PUA）里的字形严格匹配——自己生成字体时漏勾“包含私有区字符”，或下载后误删了 .eot（IE 依赖它 fallback），都会让部分环境彻底不显示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
