字体图标不生效主因是@font-face路径错误或加载时机不当；路径基准为css文件位置，应确保字体与css同目录或用相对路径修正；class="iconfont icon-home"缺一不可，前者声明字体族，后者提供unicode内容；public目录放iconfont.css会导致构建后路径失效；必须声明且置于head靠前位置。
字体图标在 HTML 中不生效，90% 是 @font-face 路径写错或加载时机不对，不是 class 写得不对、也不是 CDN 没加对。
iconfont.css 里 @font-face 的 url() 路径为什么总 404
浏览器解析 @font-face 中的 url('iconfont.woff2') 时，基准点永远是该 CSS 文件自身所在位置，不是 HTML 页面路径，也不是网站根目录。
- 比如
css/iconfont.css里写了url('iconfont.woff2')，但字体实际放在fonts/iconfont.woff2，那请求地址就是/css/iconfont.woff2→ 404 - 绝对路径如
url('/fonts/iconfont.woff2')在本地开发（localhost:3000/admin）或子路由部署时极易失效 - 最稳做法：把
iconfont.woff2、iconfont.css等所有文件放同一目录，CSS 内保持默认url('iconfont.woff2')不改 - 必须分离时：打开
iconfont.css，把所有url('...')改成相对于 CSS 文件的正确路径，例如url('../fonts/iconfont.woff2')
class="iconfont icon-home" 缺一不可的原因
这两个 class 分工明确，漏掉任意一个都会导致图标不渲染：
-
iconfont是“字体族声明类”，负责挂载font-family: 'iconfont'；没有它，::before插入的 Unicode 字符就找不到对应字体 -
icon-home是“图标映射类”，定义了::before { content: "\e600" }；没有它，就没有 Unicode 字符可插入 - 常见错误：
<i class="icon-home"></i>❌ —— 少了iconfont，浏览器用默认字体渲染\e600，结果是方块 - 检查方法：DevTools → Elements 面板选中元素 → Computed 标签页看
font-family是否最终为'iconfont'
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/ - 然后在主样式中写：
@import "@/assets/fonts/iconfont/iconfont.css";—— 构建器会解析并重写所有url()，确保路径始终正确
<meta charset="UTF-8"> 必须存在且位置靠前
Unicode 字符（如 "\e600"）依赖 UTF-8 编码解析，如果缺失或位置太靠后，字符可能被截断、乱码或直接忽略。
- 必须放在
最前面，紧随<title></title>之前或之后均可，但不能在<link rel="stylesheet">后面才加 - 验证方法：查看页面源码，确认
<meta charset="UTF-8">出现在开始处 - 若使用构建工具（如 Vite），也要确认生成的 HTML 模板里已包含该 meta 标签，而不是靠插件自动注入（有时会延迟）
真正卡住的往往不是“怎么写”，而是路径相对性、加载顺序、编码声明这三个点交叉出问题——调的时候别只盯着 class 名，先开 Network 面板过滤 font，看 iconfont.woff2 到底有没有发出去、返回是不是 200。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
