在::before、::after伪元素中加载font-awesome图标失败如何解决

• 确认已正确引入Font Awesome 5 Free版本资源：确保你引入的是5系列的Font Awesome免费版，若引入的是4.x或6.x版本，font-family的配置规则存在差异，会导致图标无法正常加载。
• 调整CSS预处理器的转义符配置：如果你使用了Sass、Less等CSS预处理器，反斜杠属于特殊转义字符，需要额外增加一层转义，将原有代码里的content: "\f007";修改为content: "\\f007";即可。
• 排查样式覆盖问题：打开浏览器F12开发者工具，选中对应的p.x元素，查看::before伪元素的样式规则，确认font-family、font-weight、content三个属性没有被更高优先级的CSS规则覆盖，若属性出现划掉的状态即为被覆盖，需要调整选择器优先级。
• 确认字体文件加载正常：打开浏览器开发者工具的网络面板，筛选「Font」类型的请求，确认Font Awesome对应的字体文件加载成功，没有404、跨域、CSP拦截等报错，字体加载失败是图标无法渲染的常见原因。
• 核对图标对应权重：你当前使用的\f007是实心用户图标，对应Free版本的Solid风格，配置font-weight: 900是正确的；如果后续需要使用Regular风格的图标，将font-weight改为400即可。

你提供的代码本身没有语法错误，按上述步骤逐一排查即可解决问题：

.x::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
}

.x::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f007";
}

<p class="x">hello, my name is john</p>

内容的提问来源于stack exchange，提问作者ali pasha