必须同时添加 iconfont 和具体图标两个类名，如 <i class="iconfont icon-android"></i>；漏掉 iconfont 类、路径错误、CSS 加载顺序不当或伪元素覆盖均会导致图标不显示。
<i> 标签本身不带图标，它只是个容器；真正让图标显示出来的，是 class 名触发的字体规则和对应字体文件。用 <i> 配合 iconfont，本质是「用文字的方式渲染图形」——所以必须满足字体加载、类名匹配、CSS 作用域三个前提。
必须同时写两个 class：iconfont 和具体图标名
<i class="iconfont icon-search"></i> 是能显示图标的最小合法写法。
漏掉 iconfont 这个基础类，浏览器根本不会把 icon-search 当作字体图标处理——它只会当普通空标签，什么也不渲染。
-
iconfont类负责挂载@font-face定义的字体族（如font-family: "iconfont"） -
icon-search类负责注入 Unicode 码点（如content: "\e604"），告诉这个元素“该显示哪个字形” - 两者缺一不可，且顺序无关，但大小写必须完全一致（
icon-Search≠icon-search）
常见错误现象：图标显示为方块、问号、空白，控制台无报错——90% 是因为只写了 class="icon-search"，没加 iconfont。
字体文件路径错，iconfont.css 就是摆设
下载解压后的 iconfont.css 里，@font-face 中的 url() 默认是相对路径，比如：
src: url('iconfont.woff2') format('woff2');如果把 iconfont.css 放在 /css/iconfont.css，而字体文件实际在 /fonts/iconfont.woff2，那浏览器会 404 加载失败，且控制台只报 “Failed to load resource”，不提示缺哪个文件。
- 把整个 iconfont 文件夹（含 .woff2、.ttf、.css）统一放进项目静态资源目录，比如
/assets/icon/ - 在 HTML 中用绝对路径引入 CSS：
<link rel="stylesheet" href="/assets/icon/iconfont.css"> - 检查
iconfont.css里所有url()是否指向同级或正确位置；若不对，直接改写成url('./iconfont.woff2')或url('/assets/icon/iconfont.woff2')
别指望浏览器自动猜路径，它只按你写的地址去 fetch。
<i> 的样式控制依赖 font-size 和 color，但可能被伪元素覆盖
图标本质是字体，所以 font-size 控制大小，color 控制颜色，vertical-align 调整基线对齐——这些都有效。
但如果你发现改了 color 没反应，大概率是 CSS 里用了伪元素（::before）强行覆盖了继承色：
彩色通用功能图标合集矢量素材适用于手机APP应用软件UI界面设计、企业官网后台导航栏、商业企划书PPT排版美化、产品功能说明书配图等相关视觉场景设计，由AI生成的Ai格式素材。
.icon-search::before {
color: #333; /* 这行会锁死颜色，无视父级 color */
}解决办法：
- 查看
iconfont.css是否有类似写死color的规则 - 在你自己的样式中用
!important覆盖（不推荐） - 更稳妥的是删掉那行固定色，改用
fill: currentColor（仅对 Symbol 方式生效）或确保伪元素没写死值
另外，<i> 默认是 inline 元素，若需居中、换行、响应式缩放，得额外加 display: inline-block 或 vertical-align: middle。
动态插入的图标要等字体加载完成才能稳定显示
如果图标类名来自 API（比如后端返回 "icon": "icon-user"），然后 JS 拼出 <i class="iconfont icon-user"></i> 插入 DOM，很可能出现「先闪白框、再出图标」的现象。
这是因为字体文件还没加载完，浏览器暂时没渲染出字形。
- 不要用
setTimeout猜时间，改用document.fonts.load("iconfont")监听加载完成 - 或者把
<link rel="stylesheet">放在<head>顶部，确保优先加载，避免动态插入时字体未就绪
最省事的底线方案：所有图标类名必须在页面初始 HTML 中存在，CSS 同步加载，不依赖 JS 注入。
iconfont 的坑不在难，而在细——类名少一个、路径差一级、CSS 多一行覆盖，图标就消失。它不报错，只沉默。
