图标不显示主要因字体路径错误、服务器配置不当或跨域限制。1. 检查CSS中@font-face的字体路径是否正确，确保文件可访问；2. 通过开发者工具查看字体请求状态，排除404或URL错误；3. 确认服务器配置了woff、ttf等字体的MIME类型；4. 若跨域引入，需设置CORS头允许域名访问；5. 核对HTML中使用的类名与图标库文档一致。
图标库通过 @font-face 引入字体文件（如 .woff, .ttf 等），若使用 link 方式引入 CSS，但图标不显示，通常是字体资源路径不可访问或浏览器加载失败。以下是系统排查方法。
1. 检查字体文件路径是否正确
图标库的 CSS 文件中通常包含类似如下代码：
@font-face {font-family: 'IconFont';
src: url('./fonts/iconfont.woff2') format('woff2'),
url('./fonts/iconfont.woff') format('woff');
}
确保这些相对路径在你的项目结构中是可访问的。如果 CSS 是从 CDN 加载，而字体文件放在本地，路径会失效。
解决方案：
立即学习“前端免费学习笔记（深入）”；
- 确认字体文件已上传到服务器对应目录
- 将 CSS 中的相对路径改为绝对路径或 CDN 路径
- 或将整个图标资源（CSS + 字体）托管在同一位置
2. 打开浏览器开发者工具检查网络请求
按 F12 打开开发者工具，切换到 Network 标签页，刷新页面，查找字体文件（如 .woff, .ttf）的请求。
观察点：
- 字体文件是否发起请求？
- 请求状态码是否为 404 或 403？
- 请求的 URL 是否与预期一致？
若出现 404，说明路径错误；若被拦截，可能是跨域或 MIME 类型问题。
3. 检查服务器是否支持字体文件的 MIME 类型
某些服务器未配置字体文件的正确 MIME 类型，会导致浏览器拒绝加载。
常见字体 MIME 类型：
- .woff: application/font-woff
- .woff2: font/woff2
- .ttf: application/font-sfnt
- .eot: application/vnd.ms-fontobject
确保 Web 服务器（如 Nginx、Apache）或 CDN 配置了这些类型。
4. 排查跨域问题（CORS）
如果字体文件与页面不在同一域名下，需服务器返回正确的 CORS 头。
例如，Nginx 应添加：
location ~* \.(woff|woff2|ttf|eot)$ {add_header Access-Control-Allow-Origin *;
}
否则浏览器会因安全策略阻止字体加载。
5. 验证 CSS 类名是否正确使用
即使字体加载成功，若 HTML 中类名写错，图标也不会显示。
例如：
确认类名与图标库文档一致，且没有拼写错误。
基本上就这些。重点是确保字体文件能被正确请求并加载，路径、服务器配置、跨域三者缺一不可。
