FontAwesome图标不显示主因是路径错误或class不匹配，推荐CDN引入并注意v6使用fa-solid/fa-brands等新前缀，避免混用版本或CSS隐藏。
FontAwesome 图标不显示，多数情况是路径没对上或 class 写错了，不是字体本身有问题。
检查 FontAwesome 的引入方式是否正确
推荐用 CDN 引入（最简单稳定）：
在 head 中加入：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
注意版本号（如 6.5.0）要和你写的 class 匹配。v6 默认用 fa-solid、fa-brands 等前缀，不再用 v4 的 fa 单一前缀。
立即学习“前端免费学习笔记（深入）”；
确认图标 class 名称是否匹配当前版本
v6 的写法和 v4 不同，容易混淆：
- v6 正确写法：<i class="fa-solid fa-home"></i>（实心图标）
- v6 正确写法：<i class="fa-brands fa-github"></i>（品牌图标）
- v4 写法（已不兼容 v6 CSS）：<i class="fa fa-home"></i> → 会不显示
查图标最新 class：直接去 fontawesome.com/icons 搜索图标，复制官网给的完整 class。
排查本地字体文件路径问题（如用下载版）
如果你把 Font Awesome 文件下载到本地，需确保：
- CSS 文件中声明的字体路径（如
url('./webfonts/fa-solid-900.woff2')）相对于 CSS 文件位置正确 - 字体文件（.woff2/.ttf 等）确实放在对应目录下，且服务器能正常返回 200
- 浏览器开发者工具 → Network 标签页里搜 woff2，看字体请求是否失败（404 或跨域）
其他常见原因
- 页面有多个 FontAwesome 版本混用（比如同时引了 v4 和 v6 的 CSS），造成 class 冲突
- 图标被 CSS 隐藏了：检查是否有
display: none、visibility: hidden、或父元素 overflow 裁剪 - 字体加载延迟导致短暂不显示：可加
font-display: block到 @font-face 规则中优化（CDN 已内置）
