使用引入css加载字体图标时，需确保路径正确、置于中且在依赖样式之前、类名同时包含iconfont和具体图标类（如icon-android）、字体就绪后才渲染图标，否则易出现方块或空白。
直接用 <link> 引入 CSS 是最常用、也最容易出问题的字体图标加载方式。它能工作，但前提是路径、顺序、类名三者全部对齐，缺一不可。
为什么图标显示成方块或空白？
绝大多数情况是 iconfont.css 里定义的 @font-face 没生效，根源往往不在图标本身，而在字体文件加载失败：
-
<link rel="stylesheet" href="/assets/icon/iconfont.css">路径写对了，但iconfont.css内部写的url('iconfont.woff')是相对路径——如果 CSS 文件在/css/iconfont.css，而字体实际放在/fonts/iconfont.woff，浏览器就 404 - 在线链接漏写协议头：
url('//at.alicdn.com/t/font_xxx.css')在 HTTP 页面里会降级为http://，但现代浏览器（尤其 HTTPS 站点）会直接 block 混合内容，必须写成https://at.alicdn.com/... -
<link>被插在里，或由 JS 动态创建并 append，部分浏览器不触发字体加载，document.fonts.load()也拿不到
如何确保 <link> 加载后图标立即可用？
关键不是“加了没”，而是“字体资源是否已就绪”。CSS 加载完成 ≠ 字体文件下载并解析完毕：
-
<link>必须放在中，且在所有依赖图标的样式之前（比如不能放在 Tailwind 的style.css后面） - 若图标类名由 JS 动态插入（如
className={`iconfont icon-${type}`}），需等字体就绪再渲染，否则首屏闪白或错位：document.fonts.load('16px "iconfont"').then(() => { /* 渲染图标 DOM */ }); - 检查浏览器 DevTools → Network 标签页，过滤
font，确认.woff/.ttf文件状态码是 200，而非 404 或 blocked
iconfont 类名为什么必须和图标类一起用？
这不是约定，是 CSS 选择器强制要求。看 iconfont.css 里的核心规则：
.iconfont {
font-family: "iconfont" !important;
font-style: normal;
}
<p>.iconfont.icon-android:before {
content: "\e600";
}</p>
这意味着只有同时命中 .iconfont 和 .icon-android 的元素，才会应用 font-family 并触发伪元素插入 Unicode 字符。漏掉 iconfont，font-family 不生效，图标自然不显示：
- ✅ 正确：
<i class="iconfont icon-android"></i> - ❌ 错误：
<i class="icon-android"></i>（除非你手动重写了.icon-android的font-family） - 大小写敏感：
icon-Android≠icon-android，类名必须和 CSS 里声明的完全一致
真正容易被忽略的点是：字体加载延迟导致的样式竞态。哪怕 <link> 放对了位置，如果页面首屏大量使用图标，又没做字体就绪等待，用户看到的就是几帧的方块或文字 fallback。这不是 bug，是字体作为异步资源的本质决定的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
