使用 iconfont 图标必须同时添加 iconfont 和具体图标两个类名，如 ；漏掉 iconfont 类、路径错误、CSS 加载顺序不当或伪元素覆盖等均会导致图标不显示。
直接用 <i></i> 标签调用 iconfont 图标，必须带两个类名
不是随便写个 class="icon-home" 就能显示的。阿里 iconfont 生成的 CSS 默认要求你同时带上图标库标识类（如 iconfont）和具体图标类（如 icon-android），否则字体文件不会被应用到该元素上。
常见错误现象：图标显示成方块、问号或空白，控制台没报错但图标不渲染——大概率是漏了 iconfont 这个基础类名。
-
<i class="iconfont icon-android"></i>✅ 正确写法 -
<i class="icon-android"></i>❌ 不会生效（除非你手动改过iconfont.css的@font-face规则或选择器） - 类名大小写必须完全一致，
icon-Android和icon-android是两个不同图标
iconfont.css 的引入路径写错，图标字体根本加载不了
下载本地包后，iconfont.css 里写的字体路径默认是相对路径，比如 url('iconfont.woff')。如果你把 CSS 文件放在 /css/iconfont.css，但字体文件实际在 /fonts/iconfont.woff，那浏览器就会 404，且控制台可能只报“failed to load resource”，不提示具体缺哪个文件。
解决办法不是硬改 CSS，而是统一资源位置：
- 把整个解压后的文件夹（含
.woff、.ttf、.svg、iconfont.css）放进项目同级目录，比如/assets/icon/ - 然后在 HTML 中用
<link rel="stylesheet" href="/assets/icon/iconfont.css"> - 确保
iconfont.css里所有url(...)指向的是同级或正确相对路径；如果路径不对，直接编辑 CSS 文件里的url值，改成url('./iconfont.woff')或绝对路径
用在线链接引入时，<link> 必须放在
iconfont 提供的在线 CSS 链接（形如 https://at.alicdn.com/t/c/font_XXXXXX.css）本质是普通样式表，它依赖浏览器解析顺序。如果用 JS 动态创建 <link> 并 append 到 ，部分浏览器会延迟加载甚至忽略字体声明，导致页面闪动或图标滞后出现。
使用场景限制明显：
- 适合静态页面、SSR 页面、或构建时已确定图标的项目
- 不适合图标类名由 API 动态返回的场景（比如后端返回
"icon-name": "icon-search"），因为 CSS 还没加载完，DOM 已渲染，iconfont类无法匹配字体 - 若必须动态加载，得配合
document.fonts.load()或监听load事件后再插入 DOM
图标颜色和大小不能靠 color 和 font-size 控制？检查是否用了伪元素覆盖
有些项目为了兼容旧版或做特殊效果，在全局 CSS 里写了类似 i::before { content: "×"; } 这样的规则，会强行覆盖 <i></i> 的内容，导致字体图标被遮住或变成文字。
另一个常见干扰是 CSS 重置库（如 normalize.css、reset.css）清除了 font-family 继承，让 iconfont 字体失效。
- 临时调试：给图标加内联样式
style="font-family: 'iconfont' !important; color: #333;"看是否恢复 - 查开发者工具的 Computed 面板，确认
font-family最终值是否包含'iconfont' -
font-size必须设在<i></i>元素本身，不要只设在父容器上；color同理，它控制的是字体图标的填充色
最易被忽略的一点：iconfont 的字体文件本身不含语义，它只是把 Unicode 字符映射成图形。所以一旦你误删了 iconfont.css 里的 @font-face 声明，或者服务器拒掉了 .woff 文件的 MIME 类型（比如返回 text/plain），图标就彻底不可见——而这类问题在本地开发时往往不暴露，上线后才爆发。
