必须同时写iconfont和具体图标两个类名，因为.iconfont类声明字体基础样式（如font-family），具体图标类通过::before伪元素插入Unicode字符，缺一则字体无法渲染，图标显示为方块或空白。
必须同时写两个类名：iconfont 和具体图标类（如 icon-home），缺一不可。只写一个，图标就显示不出来。
为什么 标签必须带两个类名？
阿里 iconfont 的 CSS 规则依赖组合选择器，比如 .iconfont.icon-home 才会把字体应用到该元素上。.iconfont 类负责声明 font-family、font-size、抗锯齿等基础样式；具体图标类（如 icon-home）则通过 ::before 伪元素插入 Unicode 字符。两者缺一，字体不会渲染，图标就变成方块或空白。
-
.iconfont是“开关”，不加它，浏览器根本不知道这是字体图标 - 类名大小写敏感：
icon-Home≠icon-home - 如果改过
iconfont.css里的选择器（比如改成单类匹配），那规则另说——但默认不推荐这么干
图标不显示的常见原因和排查顺序
控制台没报错，但图标是方块/问号/空白？按这个顺序快速定位：
- 检查 HTML 中
<i class="iconfont icon-home"></i>是否漏了iconfont—— 这是最高频错误 - 确认
iconfont.css文件已通过<link rel="stylesheet">正确引入，且路径能访问（打开浏览器开发者工具的 Network 标签页，看是否 200） - 查看
iconfont.css里@font-face声明的字体路径（如url('iconfont.woff')）是否真实存在；本地部署时，相对路径容易错位，建议统一把字体文件和 CSS 放在同一级目录，或直接改写为url('./iconfont.woff') - 检查 CSS 加载顺序：
iconfont.css必须在自定义样式之前引入，否则你写的.iconfont { font-size: 20px; }可能被覆盖
在线链接引入时的隐藏陷阱
用 iconfont 提供的在线 CSS 地址（如 https://at.alicdn.com/t/c/font_XXXXXX.css）时，别用 JS 动态创建 <link> 并 append 到 。
立即学习“前端免费学习笔记（深入）”；
- 部分浏览器（尤其是旧版 Safari 和某些移动端 WebView）对动态插入的字体声明支持不稳定，图标可能延迟加载甚至完全不触发
- 正确做法：把
<link>写死在 HTML 的里，确保它随页面初始解析一起加载 - 如果项目用构建工具（如 Webpack/Vite），也别把它当普通 CSS
@import进业务样式——字体声明需要更早介入渲染流程
真正容易被忽略的是字体路径和加载时机的耦合：哪怕类名全对、CSS 引入无误，只要 @font-face 指向的 .woff 文件 404 了，图标就永远是方块——而浏览器控制台有时只报“failed to load resource”，连文件名都不提示。
