FontAwesome伪元素图标不显示的主因是字体文件未加载、CSS选择器失效或content值与版本Unicode不匹配；需确保版本一致（v5/v6编码不同）、font-family正确设置、字体文件HTTP状态为200且MIME类型合法，并排除display/visibility等隐藏样式干扰。
FontAwesome 伪元素图标不显示，通常不是代码写错了，而是字体文件没加载成功、CSS 选择器未生效、或 content 值不匹配当前版本的 Unicode 编码。关键在于：你引入的 FontAwesome 版本，必须和你在 ::before 中写的 content 值严格对应。
确认引入的是正确版本（推荐 v6 或 v5）
FontAwesome v6 和 v5 的 Unicode 编码完全不同，混用必失败。比如 fa-home 在 v5 是 \f015，v6 是 \e123（实际以官方 CSS 文件为准）。不要凭记忆写，直接查你本地引入的 CSS 文件或官网文档。
- v6 推荐用 CDN 官方链接（含完整 CSS + 字体）
- v5 确保用
all.css或solid.css（非font-awesome.min.css这类旧版） - 检查浏览器开发者工具的 Network 面板，确认
webfonts/...字体文件状态为 200，且 MIME 类型是font/woff2等合法类型
伪元素写法必须完整且可继承字体
仅写 content: "\f015" 不够。图标依赖 FontAwesome 提供的字体族，必须显式设置 font-family，并确保父容器不重置字体继承。
- 基础写法（以 v5 solid 图标为例）：
.icon-home::before {
font-family: "Font Awesome 5 Free";
font-weight: 900; /* solid 图标需 900，regular 用 400 */
content: "\f015";
}- 若用 v6，字体名变为
"Font Awesome 6 Free"，且需注意是否启用了svg-core模式（默认已禁用伪元素，需手动开启） - 避免在父级设置
font-family: sans-serif等覆盖，导致子元素伪元素无法继承字体
检查 CSS 优先级与显示属性
即使内容和字体都对，也可能被其他样式压制：
立即学习“前端免费学习笔记（深入）”；
- 确保伪元素没有被
display: none、visibility: hidden或opacity: 0隐藏 - 检查是否被更高优先级的
font-family覆盖（例如全局重置样式） - 给伪元素加临时边框：
border: 1px solid red，确认它是否渲染出了盒子 —— 如果盒子有，图标没出现，就是字体或 content 问题；如果盒子都没，就是选择器不匹配或 display 被设为 none
替代方案：直接用 SVG 更稳定（尤其 v6 默认推荐）
伪元素易出错，现代项目更建议用 SVG 内联方式：
- v6 CDN 自动注入 SVG JS，直接写
即可 - 无需担心字体加载、Unicode 匹配、CSS 优先级等问题
- 如必须用伪元素，v6 需在初始化时启用 CSS 模式：
config = { familyPrefix: "fa", active: true }（见官方文档 “CSS Pseudo-Elements”）
