17370845950

图标不显示主因是资源加载失败或字体格式不兼容，需检查链接有效性、woff2/woff字体是否200加载、CSS类名与HTML是否完全一致、跨域CORS限制及font-family配置是否匹配。

图标不显示，多数情况不是代码写错了，而是资源没加载成功或字体格式不被支持。重点检查链接是否有效、字体格式是否兼容、CSS类名是否匹配，以及跨域或CORS限制。

确认 iconfont 的 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 中写成 ，不能漏掉前缀（如误写成 home 或 iconfont-home）
• 若修改过 font-family 名称（如自定义为 my-icon），需同步更新 CSS 中的 font-family: 'my-icon' 和 HTML 的 style="font-family: 'my-icon'"

留意跨域与 Content-Type 问题

用 引入远程 iconfont CSS 时，若其字体文件托管在不同域名（如 at.alicdn.com），浏览器会发起跨域请求。虽然 CSS 本身能加载，但字体文件可能因服务端未配置 CORS 头而被拦截。

• Network 面板中字体请求若显示 “Blocked” 或 “CORS error”，说明服务端未返回 Access-Control-Allow-Origin: *
• 阿里 iconfont 的 CDN 默认支持跨域，但企业自建字体服务常忽略此配置
• 解决方式：下载字体文件自行部署，或联系后端添加响应头；开发环境可用本地 server（如 vite、webpack dev server）代理字体请求

基本上就这些。核心是“看网络请求是否成功” + “查字体格式是否加载” + “对得上类名和 font-family”。不复杂但容易忽略细节。