字体图标不显示主因是字体文件加载失败或CSS类名错误，需检查@font-face路径、格式兼容性、跨域限制及HTML类名匹配，并确保使用本地服务器预览。
字体图标不显示，多数情况是字体文件未正确加载或 CSS 类名使用错误。核心问题通常出在 @font-face 声明路径、字体格式兼容性、跨域限制，或 HTML 中未正确添加对应类名。
检查 @font-face 的 src 路径是否正确
确保字体文件（如 .woff2、.woff、.ttf）路径可访问。相对路径需以 CSS 文件位置为基准，不是 HTML 页面位置。
- 推荐优先使用绝对路径，例如：
url('/fonts/iconfont.woff2') - 在浏览器开发者工具的「Network」标签中搜索字体文件名，确认状态码是 200；若为 404，说明路径错误
- 避免使用
../过多层级，容易出错；可将字体文件放在与 CSS 同级的fonts/目录下统一管理
确认字体格式和浏览器兼容性
现代浏览器优先支持 .woff2，但旧版 IE 需要 .eot，Safari 有时对 .ttf 更友好。建议按规范顺序声明多种格式：
@font-face {
font-family: 'iconfont';
src: url('./iconfont.eot'); /* IE9 */
src: url('./iconfont.eot?#iefix') format('embedded-opentype'),
url('./iconfont.woff2') format('woff2'),
url('./iconfont.woff') format('woff'),
url('./iconfont.ttf') format('truetype');
font-display: swap;
}注意：font-display: swap 可避免图标闪动或长时间空白
立即学习“前端免费学习笔记（深入）”；
验证 CSS 类名与 Unicode / 字符映射是否匹配
字体图标库（如 iconfont.cn）生成的 CSS 通常包含两部分：一是 @font-face，二是类似 .icon-home::before { content: "\e601"; } 的规则。
- 确保 HTML 元素同时拥有字体族和图标类，例如：
<i class="iconfont icon-home"></i> - 检查该类是否真正在 CSS 中定义了
::before伪元素 +content值 - 如果手动复制了图标 Unicode（如
\e601），需确认它和字体文件中的字符一一对应；建议直接用官网下载的完整 CSS，不要只截取部分
排查跨域与 Content-Type 问题
若字体文件部署在 CDN 或不同域名下，需服务端配置 CORS 头，否则 Chrome/Firefox 会拒绝加载：
- 响应头应包含：
Access-Control-Allow-Origin: *（或指定域名） - 检查服务器是否正确返回字体 MIME 类型，例如：
font/woff2，而非text/plain - 本地开发时（
file://协议）也会因安全策略阻断字体加载，务必用本地服务器（如 Live Server、http-server）预览
