图标不显示主因是资源加载失败或字体格式不兼容，需检查链接有效性、woff2/woff字体是否200加载、CSS类名与HTML是否完全一致、跨域CORS限制及font-family配置是否匹配。
图标不显示，多数情况不是代码写错了，而是资源没加载成功或字体格式不被支持。重点检查链接是否有效、字体格式是否兼容、CSS类名是否匹配，以及跨域或CORS限制。
确认 iconfont 的 link 地址可访问
浏览器打开 <link> 标签中的 href 地址（比如 https://at.alicdn.com/t/c/font_XXXXXX.css），看能否正常加载 CSS 文件。如果 404 或返回空白/错误页，说明资源已失效或链接错误。
- 登录 iconfont.cn，重新进入项目，复制最新的「在线链接」，不要复用旧链接
- 注意链接末尾是否有
?t=xxx时间戳参数，有时缓存导致旧版本 CSS 未更新 - 若使用私有项目或内网部署，确保该 CSS 和对应的 .woff2/.ttf 文件域名可被前端访问
检查字体文件格式与浏览器兼容性
iconfont 默认生成的 CSS 中通常包含多种字体格式（.woff2、.woff、.ttf、.eot、.svg），但现代浏览器主要依赖 .woff2（高效压缩）和 .woff（广泛兼容）。如果只提供了 .ttf 或 .eot，部分浏览器可能拒绝加载。
- 打开开发者工具 → Network → 刷页面 → 筛选 “font” 类型，查看 woff2/woff 是否 200 加载成功
- 若显示 404，说明对应字体文件路径不对；常见原因是 CSS 里写的
url('iconfont.woff2')是相对路径，而实际文件没放在同目录下 - 推荐做法：下载 iconfont 压缩包，把字体文件（.woff2/.woff/.ttf）和 CSS 放在同一目录，或统一改为绝对路径（如
url('/fonts/iconfont.woff2')）
验证 CSS 类名与 HTML 使用是否一致
引入成功 ≠ 能显示。必须确保 HTML 中使用的 class 名与 iconfont 项目中生成的 class 完全一致（包括前缀）。
立即学习“前端免费学习笔记（深入）”；
- 在 iconfont 项目「下载至本地」后，打开
iconfont.css，查找类似.icon-home:before { content: "\e601"; }的规则 - HTML 中写成
<i class="icon-home"></i>，不能漏掉前缀（如误写成home或iconfont-home） - 若修改过 font-family 名称（如自定义为
my-icon），需同步更新 CSS 中的font-family: 'my-icon'和 HTML 的style="font-family: 'my-icon'"
留意跨域与 Content-Type 问题
用 <link> 引入远程 iconfont CSS 时，若其字体文件托管在不同域名（如 at.alicdn.com），浏览器会发起跨域请求。虽然 CSS 本身能加载，但字体文件可能因服务端未配置 CORS 头而被拦截。
- Network 面板中字体请求若显示 “Blocked” 或 “CORS error”，说明服务端未返回
Access-Control-Allow-Origin: * - 阿里 iconfont 的 CDN 默认支持跨域，但企业自建字体服务常忽略此配置
- 解决方式：下载字体文件自行部署，或联系后端添加响应头；开发环境可用本地 server（如 vite、webpack dev server）代理字体请求
基本上就这些。核心是“看网络请求是否成功” + “查字体格式是否加载” + “对得上类名和 font-family”。不复杂但容易忽略细节。
