iconfont.css中@font-face路径404，因路径相对于CSS文件而非HTML页面；需确保字体文件与CSS同目录或修正相对路径，同时检查类名、font-family及content Unicode是否匹配。
iconfont.css 的 @font-face 路径为什么总 404
路径是相对于 iconfont.css 文件本身的，不是 HTML 页面。比如你把 iconfont.css 放在 /css/iconfont.css，而字体文件实际在 /fonts/iconfont.woff2，那 CSS 里默认写的 url('iconfont.woff2') 就会 404。
最省事的做法：把所有字体文件（iconfont.woff2、iconfont.woff、iconfont.ttf 等）和 iconfont.css 放在同一目录下，CSS 中默认路径无需修改。
必须分开时：iconfont.css 里所有 url('iconfont.woff2') 都要改成相对路径，例如 url('../fonts/iconfont/iconfont.woff2')；别写绝对路径如 url('/fonts/iconfont.woff2')——本地开发或子路径部署时极易失效。
显示方块或空白
这不是代码写错了，而是字符映射断了。浏览器靠 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，字符会被降级显示为方块 -
<meta charset="UTF-8">必须存在，否则 Unicode 字符可能乱码
Vite / Webpack 项目中 iconfont.css 放 public/ 目录会出什么问题
public/ 下的文件不会被构建工具处理，@import 引入时内部的 url() 不会重写，字体路径极易错乱。
典型表现：开发时正常，打包后图标全变成方块；或者只在根路径（localhost:3000/）下能用，子路由（localhost:3000/admin/）就 404。
推荐做法：把整个 iconfont 文件夹（含 iconfont.css 和所有字体文件）放进 src/assets/fonts/ 或类似源码目录，然后在主样式中 @import "@/assets/fonts/iconfont/iconfont.css"；这样构建器能正确解析并重写所有相对路径。
为什么必须同时写 class="iconfont icon-home"
iconfont 是字体族声明类，负责挂载 font-family: 'iconfont'；icon-home 是具体图标类，负责通过 ::before 插入对应 Unicode。漏掉任意一个，图标都不会渲染。
常见错误：
-
<i class="icon-home"></i>❌ —— 没声明字体族，浏览器用系统字体渲染 \e600，结果就是方块 -
<i class="iconfont"></i>❌ —— 没指定具体字符，::before的content是空的 - 大小写或连字符不一致，比如
icon-Homevsicon-home，CSS 选择器不匹配
另外，<i></i> 是官方推荐载体标签，不是因为语义，而是默认样式干净（无 margin、padding、font-style 干扰）；用 <span></span> 或 <div> 要额外重置样式才稳定。</div>
