从 CDN 引入到浏览器缓存，逐一排查图标无法正常渲染的根源
FontAwesome 图标不显示（表现为空白方块、文字乱码或完全不渲染）是开发中最常见的问题之一。导致图标无法正常显示的原因多种多样——从最简单的 CDN 链接写错，到复杂的 CORS 跨域问题，都可能导致图标加载失败。本文整理了 10 种经过验证的排查方法和解决方案，按照从最常见到最罕见的顺序排列，帮助您快速定位并解决问题。
CDN 链接可能不正确、拼写错误或版本号不匹配
确认 CDN URL 正确且版本号与您使用的版本一致
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">确认 URL 中版本号和路径拼写无误，并检查浏览器开发者工具中的 Network 面板确认该 CSS 文件已成功加载（状态码为 200）。
使用了错误的 CSS 前缀（混用 fa、fas、far、fa-solid 等）
使用与您的 FontAwesome 版本匹配的正确前缀
<i class="fa-solid fa-house"></i>
<i class="fa-regular fa-user"></i>
<i class="fa-brands fa-github"></i>每个版本有自己的前缀体系——v4 使用 fa，v5 使用 fas/far/fab，v6+ 使用 fa-solid/fa-regular/fa-brands
CDN 版本与代码中使用的类名不匹配
确保 CDN 版本与您使用的类名匹配
<!-- v6/v7 版 CSS (使用 fa-solid / fa-regular / fa-brands 前缀) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">例如，使用 fa-solid 类名但 CDN 是仅支持 fa 前缀的 v4 版本
广告拦截器或安全扩展可能阻止字体文件加载
尝试切换到其他 CDN 以绕过拦截
<!-- 尝试切换到其他 CDN 以绕过拦截 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css">当页面通过 HTTPS 协议加载，但 FontAwesome 的 CSS 或字体文件通过 HTTP 协议引用时，所有现代浏览器会因安全策略阻止加载不安全的 HTTP 资源。
始终使用 HTTPS 协议引用所有 CDN 资源
<!-- 始终使用 HTTPS 协议引用 CDN 资源 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">始终使用 HTTPS 协议引用 CDN 资源
当 FontAwesome 的 CSS 文件和字体文件托管在不同的域名下，且服务端未正确配置 CORS 头时，浏览器会因同源策略阻止字体文件的跨域加载。
如果自托管，请确保服务器在响应字体文件时添加 Access-Control-Allow-Origin: * 头。
Nginx 配置示例：
location /fonts/ {
add_header Access-Control-Allow-Origin "*";
expires 30d;
}图标名称可能拼写错误或在您使用的版本中不存在
在 FontAwesome 图标库中检查图标名称并确认它在您的版本中存在
<!-- 先测试一个肯定存在的图标，排除其他问题 -->
<i class="fa-solid fa-star"></i> <!-- 五角星，所有版本都存在 -->
<i class="fa-solid fa-house"></i> <!-- 房子，v6+ 存在 -->
<i class="fa-solid fa-home"></i> <!-- home 在 v5 及之前版本存在 -->SVG 框架需要 JavaScript 初始化来替换图标元素
检查浏览器的 Console 面板是否有 JavaScript 报错，确保 dom.watch() 已被调用。
import { library, dom } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
// 将图标加入库中
library.add(fas)
// 导入并注册要使用的图标
dom.watch()如果没有正确初始化， 标签不会被替换为 SVG 图标
浏览器可能缓存了旧版本的 CSS 文件
确保 URL 中的版本号是您实际使用的版本
<!-- 确保 URL 中的版本号是您实际使用的版本 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">自托管时 CSS 和字体文件路径不正确
验证所有文件路径正确且文件在浏览器 Network 面板中可访问
assets/
├── css/
│ └── all.min.css # FontAwesome CSS 文件
└── webfonts/
├── fa-solid-900.woff2 # Solid 样式字体文件
├── fa-regular-400.woff2
├── fa-brands-400.woff2
└── ... # 其他字体文件确保 CSS 中的相对或绝对路径与实际文件位置匹配