直接用 @import 加载 FontAwesome 的 CSS 会阻塞渲染
浏览器解析到 @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css") 时，会暂停后续 CSS 解析和页面渲染，直到这个远程资源加载并解析完成。尤其在弱网或 CDN 延迟高时，首屏可能白屏几百毫秒甚至更久。
实操建议：
- 改用
<link rel="stylesheet">标签，放在中靠前位置（但不要最顶） - 加
crossorigin="anonymous"避免字体加载失败时无报错（尤其用 CDN 时） - 如果只用几个图标，别引入整包
all.min.css，改用fontawesome.css（未压缩版）配合tree-shaking工具或手动删减
FontAwesome 6 的 svg-with-js 方式比纯 CSS 更可靠
CSS 方式依赖 font-family: "Font Awesome 6 Free" 和字体文件加载顺序，一旦字体没加载完、或用户禁用自定义字体、或遇到 font-display: block 的 fallback 行为，图标就变成方块或字母。
实操建议：
- 在
中引入 JS 版本：<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/js/all.min.js"></script> - 它会自动把
<i class="fa-solid fa-user"></i>替换为内联<svg></svg>，不依赖字体、不闪动、可设宽高和颜色（直接用 CSS 控制svg） - 注意：JS 版本略大（~200KB），但现代浏览器缓存后影响不大；若项目已用 Webpack/Vite，推荐 npm 安装 + 按需导入
faUser等图标对象
fa-solid / fa-regular / fa-brands 的 class 必须配对正确
FontAwesome 6 把图标拆成三套字体：solid（实心）、regular（线框）、brands（品牌）。只写 fa-user 不生效，必须带前缀，比如 fa-solid fa-user 或 fa-regular fa-user（后者仅限支持线框的图标）。
常见错误现象：
- 图标不显示，控制台无报错，其实是 class 写成了
fa-user单独使用 - 品牌图标（如
fa-github）漏掉fa-brands，结果渲染成空格或小方块 - 用了
fa-regular fa-heart，但该图标在 6.x 中已被移出 regular，只保留在 solid 里 → 直接不显示
查法很简单：去官网图标页（https://fontawesome.com/icons），点开图标，看右侧“Copy HTML”给的完整 class。
本地部署时路径和字体文件权限容易出问题
把 webfonts/ 文件夹和 CSS 一起丢进项目，但忘了改 CSS 里的 url("./webfonts/...") 路径，或服务器没配好 font MIME 类型（font/woff2），图标就全挂。
实操建议：
- 用开发者工具 Network 面板过滤
webfonts，看字体请求是否 404 或 403 - 检查 CSS 中字体路径：如果是相对路径，确保 CSS 文件与
webfonts/目录层级匹配；用构建工具时，推荐用 npm 包 +@fortawesome/react-fontawesome等封装层，避开路径问题 - Nginx/Apache 要显式添加
woff2MIME 类型，否则某些浏览器拒绝加载
真要手撸本地字体，优先用 JS 方式（all.min.js）——它内置 base64 字体数据，完全绕过外部字体请求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
