最稳妥方式是用CDN引入<link>标签，放<head>最顶部、确保联网；图标类名须用fas/far/fab，禁用旧fa前缀；SVG方案更可靠但需JS支持。
CDN链接必须放靠前位置，且不能被其他CSS覆盖
Font Awesome的CSS规则依赖于font-family声明和伪元素::before内容注入，如果它被后加载的CSS重置（比如全局* { font-family: sans-serif; }或Bootstrap的reboot.css），图标就会变成方块或字母F。常见错误是把<link>放在<body>里，或紧贴</head>前——这会让它在某些构建工具中被动态CSS插入覆盖。
实操建议：
- 把
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">粘贴到<head>最顶部，就在<title>之后 - 避免使用
!important覆盖font-family的全局规则；若必须改，只针对具体容器加font-family: inherit; - 检查浏览器开发者工具的
Computed面板，确认图标元素的font-family最终值包含"Font Awesome 6 Free"
图标类名必须用fas/far/fab，fa前缀已废弃
Font Awesome 6彻底移除了fa通用前缀。写<i class="fa fa-home"></i>或<i class="fa-home"></i>不会渲染任何图标，控制台也通常不报错，只静默失败。
不同前缀对应不同字体文件和许可范围：
立即学习“前端免费学习笔记（深入）”；
-
fas：实心图标（Solid），Free版完全可用，如<i class="fas fa-user"></i> -
far：线框图标（Regular），仅部分图标支持，如<i class="far fa-clock"></i> -
fab：品牌图标（Brands），如<i class="fab fa-github"></i>，全部免费 -
fal和fad属于Pro版本，未订阅会404字体文件
查图标时务必去Font Awesome官方Free图标库筛选，别沿用v4/v5的老文档。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
按钮里混排文字和图标，必须拆开标签
把fas fa-home直接写在<button>或<a>上，再塞文字进去，比如<button class="btn fas fa-home">首页</button>，会导致整个按钮文本强制继承Font Awesome字体，中文变方块、英文字体错乱。
正确做法是让图标和文字成为兄弟节点：
<button class="btn"> <i class="fas fa-home"></i> <span>首页</span> </button>
这样CSS能独立控制i的font-family和span的字体，也不会影响行高对齐。如果要用Flex布局居中，给button加display: flex; align-items: center; gap: 8px;比硬调vertical-align更稳。
离线开发或邮件模板里图标不显示？换SVG+JS方案
CDN方式本质是联网加载字体文件，本地双击index.html打开、或嵌入邮件HTML时，https://cdnjs.cloudflare.com请求会被拦截或超时，图标就变成空格或方块。
这时该用SVG方案：
- 引入
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/js/all.min.js"></script>（注意是js/all.min.js，不是css/all.min.css） - 保留原有写法：
<i class="fas fa-envelope"></i>，JS会自动把它转成内联<svg> - 如果页面已有其他用途的
<i>标签（比如斜体语义），加脚本禁用自动替换：<script>window.FontAwesomeConfig = { autoReplaceSvg: false };</script>，放在JS引入之前
SVG方式不依赖字体加载，但多一次JS解析开销；真正零依赖的离线方案只能自己下载@fortawesome/fontawesome-free npm包，拷webfonts/目录进项目并配@font-face——不过95%的静态页没必要走这步。
