90%是路径问题：iconfont.css中@font-face的相对路径以css文件位置为基准，若woff2文件未放在对应目录或未与css同级，network面板将显示404；需确保字体文件可访问、类名匹配、utf-8编码及font-family正确生效。
iconfont.css 引入后图标不显示，90% 是路径问题
浏览器控制台 Network 面板里 iconfont.woff2 显示 404，基本可以断定是字体文件路径不对。因为 iconfont.css 里的 @font-face 声明用的是相对路径，它相对于 CSS 文件本身位置解析，不是相对于 HTML 页面。
常见错误包括：
- 把
iconfont.css放在/css/下，但iconfont.woff2实际在/fonts/—— 这时 CSS 里写的url('iconfont.woff2')就会失败 - 直接复制 CDN 链接进
<link>，但没同步引入字体文件（CDN 版本需确保服务端正确返回字体 MIME 类型，本地开发常失效） - 解压后漏掉某个字体格式（比如只留了
.woff2，但旧版 Safari 需要.ttf或.svg）
最稳做法：把所有字体文件（iconfont.woff2、iconfont.woff、iconfont.ttf 等）和 iconfont.css 放在同一目录下，CSS 中默认路径无需修改。
class="iconfont icon-home" 写对了还是空白？检查三件事
类名对不上、字体未加载、字符被降级，都会导致显示成空格或方块。打开浏览器开发者工具 Elements 面板，选中那个 <i></i> 元素，看 computed 样式里 font-family 是否生效为 'iconfont'；再看 ::before 伪元素的 content 值是不是非空 Unicode（如 "\e600"）。
需要逐项确认：
- 打开
iconfont.css，搜索.icon-home，确认该类存在且content属性值不为空 - HTML 页面
中<meta charset="UTF-8">必须存在，否则 Unicode 字符可能乱码 - 父容器没设置
font-family: sans-serif且没 fallback 到iconfont，会导致字符被系统字体渲染成方块
为什么推荐用 <i></i> 而不是 <span></span>
<i></i> 是 iconfont 官方文档明确推荐的载体标签，不是因为它“语义正确”，而是因为它的默认样式更干净：没有 margin、padding、line-height 干扰，且多数项目全局重置里已清除了 <i></i> 的斜体表现。
如果你用 <span></span>，得额外加 display: inline-block 或 font-style: normal 才能避免意外样式继承。而 <i class="iconfont icon-search"></i> 只要保证类名和字体加载成功，就能稳定出图。
注意：<i></i> 在这里纯属约定，不是语义化选择——图标本身无语义，靠 class 名承载含义。
动态插入图标时 content 值怎么取？别硬记 Unicode
如果要用 JS 动态生成图标（比如循环渲染菜单），直接拼 "\e600" 很容易出错。更可靠的方式是：从 iconfont.css 里提取对应类名的 content 值，或改用 data-icon 属性 + CSS 变量统一管理。
例如：
.icon-search::before { content: "\e600"; }
.icon-user::before { content: "\e601"; }
JS 中可这样读取（不推荐 runtime 解析 CSS，仅作示意）：
getComputedStyle(document.querySelector('.icon-search'), '::before').content
但实际项目中，建议把图标映射写死在 JS 对象里，比如：
const ICON_MAP = { search: '\e600', user: '\e601' };
el.innerHTML = `<i class="iconfont">${ICON_MAP.search}</i>`;
真正容易被忽略的是：Unicode 字符必须用双引号包裹的字符串传给 innerHTML，不能写成 ''（那是 HTML 实体，不适用于伪元素 content）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
