图标不显示的主因是iconfont CSS或字体文件加载失败、路径错误、跨域拦截、类名/Unicode不匹配或CSS覆盖。需依次检查：CSS是否200加载、@font-face路径是否正确、字体文件是否可访问且无CORS问题、HTML中class名或Unicode是否与CSS定义一致、基础样式（font-family/display/content）是否缺失或被覆盖。
图标不显示，大概率是 iconfont 的 CSS 文件没正确加载，或者字体文件（.woff/.ttf）路径出错、跨域拦截、字体未声明或 class 名写错。用 <link> 方式引入 iconfont 时，需确保四点：CDN 地址有效、字体文件可访问、CSS 中的 @font-face 路径正确、HTML 中使用的类名与字体 Unicode 或类名一致。
确认 iconfont CSS 文件已成功加载
打开浏览器开发者工具（F12），切换到 Network 面板，刷新页面，搜索 iconfont.css 或你引入的 CSS 文件名。检查其状态码是否为 200，预览（Preview）中能否看到 @font-face 声明和 .icon-xxx 类定义。若出现 404 或 403，说明链接地址错误或资源被屏蔽；若状态正常但无内容，可能是 CDN 缓存旧版或文件为空。
- 检查
<link rel="stylesheet" href="https://at.alicdn.com/t/c/xxxxxx.css">中的 URL 是否复制完整（含?t=xxx时间戳也建议保留） - 直接在浏览器地址栏粘贴该 CSS 链接，看能否打开并显示样式代码
- 避免使用本地路径（如
./iconfont.css）却部署在非根目录下导致路径解析失败
验证字体文件（.woff/.ttf）是否可访问且无跨域问题
CSS 中的 @font-face 会引用 .woff、.ttf 等字体文件。即使 CSS 加载成功，如果这些字体资源因路径错误或 CORS 策略被浏览器阻止，图标仍会显示为方块或空白。
- 在 Network 面板中搜索
.woff或.ttf，查看对应请求是否 200，响应头是否含Access-Control-Allow-Origin: *（尤其使用第三方 CDN 时） - 若字体请求显示 “Failed to load resource” 或 “Blocked by CORS policy”，可尝试下载 iconfont 包，把字体文件放到项目静态目录，并修改 CSS 中的
src路径为相对路径（如url('./iconfont.woff')） - 本地开发时，部分浏览器（如 Chrome）对
file://协议禁用字体加载，务必通过本地服务（如http://localhost:3000）访问
检查 HTML 中图标的写法是否匹配 CSS 定义
iconfont 提供两种常用用法：Unicode（推荐兼容性好）和类名（更直观）。引入 CSS 后，必须按它定义的方式使用，不能混用或拼错。
立即学习“前端免费学习笔记（深入）”；
- 若使用类名方式：
<i class="iconfont icon-home"></i>，需确认 CSS 中存在.icon-home:before { content: "\e600"; }，且 class 名与之完全一致（注意大小写、连字符） - 若使用 Unicode 方式：
<i class="iconfont"></i>，需确保 class="iconfont" 已定义字体族（如font-family: "iconfont" !important;），且 Unicode 值正确（可在 iconfont 平台“复制代码”处获取） - 不要遗漏基础样式：确保
.iconfont类有font-style: normal;和display: inline-block;，否则可能换行或样式异常
排除 CSS 优先级与覆盖干扰
有时图标“存在”但被其他样式覆盖（比如 color=transparent、font-size=0、line-height 过大撑开间距），或父容器设置了 overflow: hidden 切掉了伪元素内容。
- 在 Elements 面板中选中图标元素，看 computed 样式里
content是否生效、font-family是否为 "iconfont"、color是否可见 - 临时加一行调试样式：
.iconfont { color: #333 !important; font-size: 16px !important; }，看是否出现 - 检查是否误用了重置 CSS（如 normalize.css）清除了
:before的默认 display，可显式设置.iconfont:before { display: inline-block; }
