FontAwesome图标不显示需先检查@font-face路径是否正确，确认字体文件加载成功、CDN地址最新、本地webfonts目录同级；导航中必须加aria-hidden="true"并配sr-only文字以保障可访问性。
FontAwesome 图标在导航中不显示？先检查 @font-face 加载路径
图标字体本质是 Web Font，不显示大概率不是写法错，而是字体文件压根没加载成功。浏览器开发者工具的 Network 面板里搜 fontawesome-webfont.woff2（或 .woff），看是否返回 404 或 CORS 错误。
- CDN 引入时确保用的是官方最新地址，比如
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css；v6 默认用font-family: "Font Awesome 6 Free"，和 v5 的"Font Awesome 5 Free"不兼容 - 本地部署时，
css/all.min.css必须和它引用的webfonts/目录同级，否则相对路径失效——常见坑是把 CSS 提到/static/css/，但忘了同步复制整个webfonts/文件夹过去 - 使用
font-display: swap可避免图标闪动，但别设成block，否则首屏可能空白几秒
导航中用 <i></i> 标签加图标，但语义和可访问性出问题
<i></i> 在 HTML5 中本意是“不同语气的文字”，不是图标容器。屏幕阅读器会跳过纯 <i class="fa-solid fa-home"></i>，用户根本不知道这是“首页”。
- 必须加
aria-hidden="true"显式声明该元素无需被读取，例如：<i class="fa-solid fa-home" aria-hidden="true"></i> - 文字内容不能省，哪怕视觉上隐藏，也要用
sr-only类包裹链接文本，比如：<a href="/home"><i class="fa-solid fa-home" aria-hidden="true"></i><span class="sr-only">首页</span></a> - v6 启用 Pro 版本后，部分图标（如
fa-brands）需要额外加载fab.css，否则只显示方块——检查 computed style 里的font-family是否包含"Font Awesome 6 Brands"
用 CSS 伪元素替代 <i></i>？注意选择器权重和字体继承
想减少 DOM 节点，有人改用 ::before 插入图标，但容易忽略字体必须显式继承，否则图标字形乱码或变成宋体方块。
- 伪元素必须设
font-family: "Font Awesome 6 Free"; font-weight: 900;（solid 图标用 900，regular 用 400） - 如果父元素有
font-family: system-ui, sans-serif;，且没重置子元素的font-family，伪元素会继承失败 - 图标 Unicode 值要查官方文档对应版本，v6 的
fa-home是\f015，不是 v5 的\f015（碰巧相同但不可依赖），直接写content: "\f015";比用 JS 动态注入更稳
图标尺寸和对齐总“飘”？别只调 font-size
导航栏高度固定时，图标上下偏移不是因为没居中，而是 FontAwesome 的 baseline 和文字默认对齐方式不一致。单纯放大 font-size 会让图标“浮起来”或“沉下去”。
立即学习“前端免费学习笔记（深入）”；
- 优先用
vertical-align: middle或vertical-align: -0.125em微调（v6 推荐值），比top/bottom更可靠 - 图标和文字混排时，统一用
line-height: 1+vertical-align: middle控制基线，避免文字行高干扰 - 响应式场景下，慎用
em单位控制图标大小——如果父元素font-size动态变化（比如 rem 布局），图标会意外缩放，用px或rem更可控
最常被忽略的是字体加载时机和可访问性组合：图标没加载完时，aria-hidden="true" 已生效，但文字又被 sr-only 隐藏了，结果导航项彻底“消失”在辅助技术里。留一手，比如加个 loading="eager" 到 CSS link，或者用 document.fonts.load() 做降级兜底。
