iconfont.woff2总404是因为@font-face中url()路径相对于css文件而非html页面；应将字体文件与css同目录，或修正为正确相对路径，避免使用绝对路径。
图标不显示，90% 是 iconfont.css 里 @font-face 的 url() 路径错了，不是 HTML 引入方式的问题。
为什么 iconfont.woff2 总是 404
浏览器加载字体时，url('iconfont.woff2') 中的路径是相对于 iconfont.css 文件自身位置解析的，不是相对于 HTML 页面。比如：
-
iconfont.css在/css/iconfont.css - 但
iconfont.woff2实际放在/fonts/iconfont.woff2 - 那么 CSS 里写
url('iconfont.woff2')就会请求/css/iconfont.woff2→ 404
解决方法只有两个方向：
- 最省事：把所有字体文件（
iconfont.woff2、iconfont.woff、iconfont.ttf）和iconfont.css放在同一目录下，CSS 内默认路径不用改 - 必须分离：打开
iconfont.css，把所有url('iconfont.woff2')改成相对路径，例如url('../fonts/iconfont.woff2') - 别用绝对路径如
url('/fonts/iconfont.woff2')—— 本地开发或子路由部署（如localhost:3000/admin）时极易失效
class="iconfont icon-home" 写对了还是空白
这说明字体已加载、类名也匹配，但渲染链断在中间某环。需逐项确认：
- 打开浏览器 DevTools → Elements 面板，选中
<i class="iconfont icon-home"></i>元素，看 computed 样式中font-family是否最终生效为'iconfont'；若被父级font-family: sans-serif覆盖且没 fallback，就会降级成方块 - 检查该元素的
::before伪元素：content 值是否为非空 Unicode（如"\e600"）？打开iconfont.css搜索.icon-home，确认定义存在且未被注释 -
<meta charset="UTF-8">必须在中，否则 Unicode 字符可能乱码或无法识别 - Network 面板过滤
font，确认iconfont.woff2返回 200，而非 404 或 CORS 错误
Vite / Webpack 项目里把 iconfont.css 放 public/ 目录会怎样
构建工具不会处理 public/ 下的文件，@import 或 <link> 引入后，CSS 内部的 url() 不会被重写，路径几乎必然错乱。
典型表现：
- 开发时正常（因为 dev server 可能兜底），打包后图标全变方块
- 只在根路径（
localhost:3000/）下能用，进子路由（localhost:3000/user）就 404
正确做法：
- 把整个 iconfont 文件夹（含
iconfont.css和所有字体文件）放进源码目录，如src/assets/fonts/iconfont/ - 在主样式（如
src/style/index.css）中写：@import "@/assets/fonts/iconfont/iconfont.css"; - 构建器会解析并重写所有
url()，确保路径始终正确
为什么必须同时写 class="iconfont icon-home"
iconfont 类负责声明 font-family: 'iconfont'，icon-home 类负责通过 ::before { content: "\e600" } 插入字符 —— 二者缺一不可。
常见误解：
- 只写
class="icon-home"：没挂载字体族，浏览器用默认字体渲染\e600→ 显示方块 - 只写
class="iconfont"：没插入任何字符，::before为空 → 什么也不显示 - 用
<span></span>或<div> 替代 <code><i></i>：虽可行，但需额外加display: inline-block或清除默认样式干扰；<i></i>是官方推荐载体，因它默认无 margin/padding/line-height，样式更干净最后提醒：动态插入图标（如 JS 循环生成菜单）时，别硬记 Unicode，直接从
iconfont.css里复制对应类的content值最可靠。路径、类名、字体族、编码，四者必须严丝合缝，漏一个环节图标就消失。
