Font Awesome 6/7 中图标显示必须用 fas/far/fab 前缀，fa fa-home 或 fa-home 静默失效；CDN 链接须置于 <head> 中 <title> 后、其他 CSS 前；图标需单独包裹在 <i> 中并加 aria-hidden="true"，避免字体继承导致中文变方块。
fas、far、fab 这三个前缀必须用对，写 fa fa-home 或 fa-home 在 Font Awesome 6/7 中完全不显示图标——不是“偶尔失效”，是静默丢弃。
CDN 链接必须放 <head> 最顶部，且不能被覆盖
浏览器按顺序解析 CSS，Font Awesome 的规则依赖 font-family: "Font Awesome 6 Free" 和 ::before 注入 Unicode 字符。如果后面加载的 CSS（比如 Bootstrap 的 reboot.css、或全局 * { font-family: sans-serif; }）重置了 font-family，图标就变成方块或字母 F。
- 把
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">粘贴到<title>标签之后、其他任何<link>或<style>之前 - 检查开发者工具的 Computed 面板，确认图标元素的最终
font-family值包含"Font Awesome 6 Free" - 别把链接塞进
<body>，也别紧贴</head>——某些构建工具（如 Vite 插件）会动态注入 CSS，导致它实际加载顺序靠后
<i> 标签必须和文字分开放，不能混在同一个容器里
写 <button class="btn fas fa-home">首页</button> 会让“首页”两个字也被强制套上 Font Awesome 字体，中文变方块、英文字体错乱。这不是 bug，是 CSS 继承的必然结果。
- 正确结构：
<button class="btn"><i class="fas fa-home" aria-hidden="true"></i>首页</button> - 加
aria-hidden="true"是必须项，否则屏幕阅读器会把空<i>读成“未知字符” - 若需垂直居中，给
<button>加display: flex; align-items: center; gap: 8px;，比调vertical-align更稳
图标类名拼错、版本错、网络断，三者都会导致“空白”
控制台不报错，DOM 里 <i class="fas fa-home"></i> 看起来完好，但就是没图标——大概率是这三种情况之一。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 查图标名：v6+ 已移除
fa-twitter，得用fab fa-twitter；fa-user要写成fas fa-user；大小写敏感，fa-Github无效 - 确认 CDN 链接版本号是否有效：https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css —— 404 就换最新版（官网 Get Started 页面复制）
- 离线开发时 CDN 不工作，别指望本地预览；要离线，就改用本地
all.min.css+webfonts/目录，且确保路径正确、MIME 类型配置无误
按钮里的社交图标，最小可点击区域必须达标
单纯放个 <i class="fab fa-github"></i> 在链接里，手机上根本点不中——24px 图标远低于 WCAG 推荐的 44×44px 最小触控区。
- 外层链接或按钮加
min-width: 44px; min-height: 44px; - 图标本身用
margin: 0 8px;控制左右间距，别只用margin-right，否则末尾多出空白 - 品牌图标链接务必加
rel="noopener noreferrer"，这是安全底线
真正卡住人的地方，从来不是“怎么加”，而是“为什么加了却看不见”。多数时候，问题不在代码逻辑，而在字体加载链路里某一个环节被悄悄覆盖或跳过——比如你改了全局 font-family 却忘了只针对文本容器重置，或者复制了 v5 的文档示例却用了 v6 的 CDN。
