图标不显示需依次检查：字体文件路径是否正确（推荐绝对路径）、class名与CSS定义是否一致、避免在线预览页HTML示例误导、多字体冲突、IE11需兼容格式及双斜杠unicode转义。
link引入iconfont后图标不显示？先检查字体文件是否加载成功
浏览器控制台 Network 面板里搜 iconfont.woff2 或 iconfont.woff，看状态码是不是 200。常见问题是路径写错——比如你把 iconfont.css 放在项目根目录，但 CSS 文件里写的 url('./iconfont.woff2')，实际字体文件却在 /static/fonts/ 下，相对路径就断了。
- 推荐用绝对路径：把 CSS 中的
url('./iconfont.woff2')改成url('/static/fonts/iconfont.woff2') - 如果用构建工具（如 Webpack/Vite），别直接 link 外链 CSS，改用
@import或import方式引入，避免 public 目录路径混乱 - 注意跨域：若从第三方 iconfont.cn 直接 link，部分企业内网会拦截
https://at.alicdn.com/t/c/font_*.css，建议下载到本地
class名对不上？确认CSS中定义的unicode和HTML里用的是否一致
iconfont 生成的 CSS 通常包含类似这样的规则：.icon-home:before { content: "\e601"; }。你写 <i class="icon-home"></i> 才能生效。很多人复制代码时漏掉 :before 对应的 class 前缀，或者用了旧版 class 名（比如 iconfont 而不是 icon-home）。
- 打开 iconfont 项目页 → “下载至本地” → 解压后查
iconfont.css，找你要用的图标对应的真实 class 名 - 别依赖在线预览页的 HTML 示例，它可能用了自动生成的 symbol 模式，和 link 引入的 font 模式不兼容
- 如果页面已有其他 iconfont 字体，多个
@font-face定义可能冲突，优先级取决于 CSS 加载顺序
字体渲染模糊或偏移？调整font-display和vertical-align
矢量图标本质是文字，受字体渲染策略影响。默认 font-display: swap 可能导致图标闪动；而行内显示时，<i> 默认按基线对齐，常比周围文字高半截。
- 在 iconfont.css 的
@font-face块里加font-display: optional，减少 FOIT/FOUT - 给图标加样式：
i[class^="icon-"] { font-style: normal; vertical-align: middle; } - 避免用
font-size: 0清除间隙——这会让图标直接消失，因为图标靠:before的 content 渲染，不是子元素
IE11 兼容性问题？必须保留 .eot 和 .ttf 格式
IE11 不支持 woff2，只认 .eot 和 .ttf。如果你只上传了 woff2/woff，link 引入后 IE 会静默失败，控制台也不报错。
立即学习“前端免费学习笔记（深入）”；
- 下载 iconfont 时勾选“生成兼容 IE8+ 的字体包”，确保压缩包含
iconfont.eot和iconfont.ttf - 检查
@font-face规则里 src 是否按格式优先级排列：url('iconfont.eot'); url('iconfont.eot?#iefix') format('embedded-opentype'); url('iconfont.woff2') format('woff2'); - IE 下
content里的 unicode 必须是双斜杠转义，如"\e601"，不能写成"\ue601"，否则解析失败
真正麻烦的不是引入步骤，而是字体文件路径、CSS class 映射、浏览器字体栈三者之间差一个字符就全白搭。尤其是团队协作时，有人改了 iconfont 项目又没同步 CSS 文件，线上就只剩方块。
