图标显示为方块90%是字体文件未加载成功，核心原因有三：路径错误导致404、HTML元素缺失iconfont或icon-home任一CSS类、父容器font-family被覆盖且无'iconfont'回退声明。
直接用 iconfont 本地包最稳，CDN 方式在内网或弱网环境容易加载失败或跨域阻塞渲染。
为什么 <i class="iconfont icon-home"></i> 显示成方块
90% 是字体文件没加载成功，不是类名写错了。核心就三点：路径对、类名对、字体族没被覆盖。
-
iconfont.css里@font-face声明的url('iconfont.woff2')是相对该 CSS 文件的位置，不是 HTML 页面位置 —— 把 CSS 放在/css/、字体放在/fonts/却不改路径，必然 404 - HTML 元素必须同时有
iconfont（声明字体族）和icon-home（注入 Unicode 字符）两个类，漏一个就不显示 - 父容器写了
font-family: "Helvetica Neue"且没设font-family: 'iconfont', sans-seriffallback，浏览器会跳过图标字体直接 fallback 到系统字体，显示方块
iconfont.css 路径改错的典型表现和修复方式
Network 面板看到 iconfont.woff2 返回 404，说明路径解析失败。别猜，直接打开 iconfont.css 搜索 url(，看它指向哪。
- 如果 CSS 和字体文件同目录（推荐），保持默认：
url('iconfont.woff2') - 如果 CSS 在
/static/css/iconfont.css，字体在/static/fonts/iconfont.woff2，就改成：url('../fonts/iconfont.woff2') - 绝对路径（
url('/fonts/iconfont.woff2')）看似省事，但一旦项目部署到子路径（如https://example.com/myapp/），就会 404 —— 优先用相对路径
Font Awesome CDN 引入后图标不出现的硬核排查点
CDN 看似一键引入，但实际卡在几个隐蔽环节：
立即学习“前端免费学习笔记（深入）”；
-
<link>标签没加crossorigin="anonymous"，某些 CDN（如 cdnjs）会拒绝返回字体文件，导致图标空白 - 用了
fas fa-user却没确认当前版本是否包含该图标 —— Font Awesome 6 移除了部分旧图标，fa-bell-o这类带-o后缀的已废弃 - 页面启用了 CSP（Content Security Policy），但没在
font-src里放 CDN 域名，浏览器静默拦截字体请求
字体图标真正难的从来不是“怎么写”，而是“为什么没显示”。把 Network 面板开着调一次，比翻十遍文档都管用 —— 图标不显示，一定是字体文件没进来，或者进来了但没被正确应用。
