Font Awesome 6 必须使用正确 CDN 路径和 class 前缀：，图标需用 fa-solid、fa-regular 或 fa-brands 前缀加新图标名（如 fa-house），本地部署时确保 webfonts/ 路径与 CSS 中 url() 一致，加载失败优先查 Network 和 Console 报错。
用 CDN 引入 Font Awesome 5/6 的
Font Awesome 5 和 6 的 CDN 地址不兼容，写错就看不到图标。最稳妥的是去官网复制最新免费版链接，别抄旧教程里的地址。
比如 Font Awesome 6 Free 的标准 CDN 是：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
注意三点：
-
font-awesome/6.5.0中的版本号要和实际使用一致；删掉版本号或写成latest会失效 - 路径里是
css/all.min.css，不是css/fontawesome.css（后者只含核心，没图标） - 必须放在
里，且在自定义 CSS 之前，否则图标样式可能被覆盖
图标渲染靠 class 名，漏前缀或拼错就显示成方块或文字。FA6 默认用 fa-solid、fa-regular、fa-brands 三类前缀，不能只写 fa-home。
常见写法：
<i class="fa-solid fa-house"></i> <!-- 实心房屋图标 --><br><i class="fa-regular fa-user"></i> <!-- 线框用户图标 --><br><i class="fa-brands fa-github"></i> <!-- GitHub 品牌图标 -->
容易踩的坑：
- FA5 的
fa fa-home在 FA6 里已废弃，直接用会不显示 -
fa-house不是fa-home（FA6 重命名了大部分图标名） - 品牌图标必须用
fa-brands，混用fa-solid会导致图标变空心或错位
本地引入时 fontawesome-webfont.woff2 路径不能出错
如果下载 ZIP 解压后本地引用，CSS 文件里会通过 @font-face 加载字体文件，路径错一个层级图标就全挂。
假设你把整个 webfonts/ 文件夹放在项目根目录下的 assets/fonts/，那 CSS 里的 url() 就得对应上：
@font-face {<br> font-family: 'Font Awesome 6 Free';<br> src: url('../assets/fonts/webfonts/fa-solid-900.woff2') format('woff2');<br>}
关键点：
- CSS 文件和
webfonts/文件夹的相对位置要算准，建议用浏览器开发者工具看 Network 面板里.woff2请求是否 404 - FA6 的字体文件名带权重标识，如
fa-solid-900.woff2，不是fontawesome-webfont.woff2（那是 FA4 的） - 本地部署到子路径（如
/myapp/）时，CDN 可能更省事，避免路径重写问题
图标不显示？先检查控制台有没有 Failed to load resource 或 CORS 错误
图标空白时，90% 是资源加载失败，而不是 class 写错。打开浏览器 DevTools 的 Console 和 Network 标签页，重点看：
- 是否有
GET https://.../all.min.css net::ERR_ABORTED—— 说明 CDN 地址无效或被拦截 - 是否有
Access to font at '...' from origin '...' has been blocked by CORS policy—— 本地双击打开 HTML 时，Chrome 会因 file:// 协议禁止加载字体，必须用本地服务器（如npx serve）跑 - 是否有
Uncaught DOMException: Failed to execute 'insertBefore' on 'Node'—— 多半是脚本在 DOM 加载前执行，但 Font Awesome 本身纯 CSS，一般不涉及 JS，所以大概率是你自己写的 JS 干扰了
FA6 的图标依赖字体渲染，没有降级 fallback，一旦字体加载失败， 标签就只剩一个空格。这点比 SVG 引入方式更脆弱，也更轻量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
