使用FontAwesome JS Kit时::before伪类无法生效怎么办？

我之前也碰到过一模一样的坑！你已经确认Kit文件和CSS都正常加载（直接用<i class="fab fa-instagram fa-lg"></i>能正常显示就说明基础环境没问题），那问题的核心就出在Font Awesome JS Kit对伪元素图标的特殊要求上。

Font Awesome的JS Kit默认不会主动扫描伪元素里的图标代码，所以你需要给加载Kit的<script>标签加上data-search-pseudo-elements属性，这个属性会让JS去解析伪元素的content值，从而正确渲染对应的图标。

你需要把原来的脚本改成这样：

<script data-search-pseudo-elements defer src="https://kit.fontawesome.com/xxxxxxxxxxx.js"></script>

另外再确认下你的SASS代码是没问题的：

• 字体族"Font Awesome 5 Free"正确，相机图标（\f030）属于Solid样式，所以font-weight: 900的设置完全没问题（Solid系列图标必须用900权重）
• 要是之后还是有显示问题，可以检查下伪元素的display属性是否设置为inline-block或block，避免图标被隐藏

你提到这是一个会被修复的已知bug，目前加这个属性就是最直接有效的临时解决方案啦。

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