Font Awesome 图标显示为方块，主因是 font-family 被全局样式覆盖，导致图标字体被替换；需为图标元素显式声明 font-family 和 font-weight，并排查字体加载失败、CSP 限制及伪元素干扰等问题。
Font Awesome 图标变方块，大概率是 font-family 被覆盖了
Font Awesome 依赖 font-family: 'Font Awesome 6 Free'（或 v5 的 'Font Awesome 5 Free'）来渲染图标。如果你在全局 CSS 里写了类似 font-family: "Helvetica", sans-serif; 并作用到 <i></i> 元素上，图标字体会被强制替换为无图标的系统字体，结果就是方块或空心矩形。
常见踩坑点：
- 用
* { font-family: ... }或body { font-family: ... }无差别覆盖，没排除i、span等内联元素 - Bootstrap 自带的
.text-*类（如.text-primary）可能继承了全局 font-family，间接影响图标容器 - 某些 UI 框架重置样式（如 Normalize.css 后续自定义）会把
i元素设为font-style: italic，而 FA6 的fa-solid字体默认禁用斜体，导致字形不匹配
如何安全覆盖字体而不干掉图标
核心原则：让图标元素「跳过」全局 font-family 设置。最稳的方式是给 Font Awesome 的所有图标类加明确的 font-family 回填：
i[class^="fa-"],
i[class*=" fa-"] {
font-family: 'Font Awesome 6 Free' !important;
font-weight: 900; /* fa-solid 对应 900 */
}
<p>.fa-regular {
font-weight: 400;
}</p><p>.fa-brands {
font-family: 'Font Awesome 6 Brands' !important;
font-weight: 400;
}注意：
立即学习“前端免费学习笔记（深入）”；
- 别只写
i { font-family: ... }—— 这会和 Bootstrap 的.btn i、.nav-link i等规则冲突 - FA6 的
fa-solid必须配font-weight: 900，写成normal或400会显示为空白 - 如果用了 FA5（
fas），对应字体名是'Font Awesome 5 Free'，且fas也需font-weight: 900
检查控制台是否报字体 404 或 CORS 错误
即使 class 和 font-family 都对，图标仍不显示，打开浏览器开发者工具的 Network 标签页，筛选 font，看有没有 fontawesome-webfont.woff2 或类似请求返回 404 或 Blocked by CSP。
典型问题：
- 你用了本地部署的 FA CSS，但
fonts/目录没放在 CSS 同级路径下（FA4/FA5 的 CSS 里写的是../fonts/，FA6 默认用相对路径../webfonts/） - CSP 策略限制了
font-src，比如用了 cdnjs.com 的 CSS，但没在Content-Security-Policy头里加font-src https://cdnjs.cloudflare.com; - CDN 链接本身失效（如旧版
maxcdn.bootstrapcdn.com/font-awesome/4.3.0/已停服），请求直接 404
Bootstrap 5+ 面包屑、按钮等组件里图标错位
不是字体问题，而是布局干扰。Bootstrap 的 .breadcrumb-item::before、.btn:focus 的 outline 或 padding 变化，会让 <i></i> 偏离预期位置。
实操建议：
- 在图标上加
align-middle（Bootstrap 5+ 内置类），比手写vertical-align: middle更可靠 - 避免在
.input-group-text里直接放<i></i>，改用<span class="input-group-text"><i class="fa-solid fa-envelope"></i></span> - 面包屑首页图标若被 SVG 覆盖，先删掉原
<svg></svg>，再确保<i></i>在<li class="breadcrumb-item">最内层，且没有其他伪元素干扰
真正麻烦的从来不是“怎么加图标”，而是“加完之后谁动了我的 font-family 和 font-weight”。版本混用、全局重置、CSP 限制、伪元素覆盖——这四类问题占了实际项目中图标失效的 90% 以上。盯住控制台字体请求和 computed 样式里的 font-family / font-weight 两项，比反复换 CDN 链接更省时间。
