作为伪元素添加的Font Awesome图标如何修改颜色？

完全可以修改作为伪元素插入的 Font Awesome 图标颜色，你添加 color 属性没有效果一般是样式优先级冲突或语法问题导致的，可按下面的步骤排查解决：

• 第一步：排查样式优先级覆盖问题
  打开浏览器开发者工具，选中对应元素，切换到「计算样式」标签页搜索color，查看当前生效的颜色值来自哪条样式规则，确认是否存在更高优先级的规则（比如带!important的规则、层级更长的后代选择器）覆盖了你给#id::before设置的颜色。
• 第二步：测试优先级问题
  可以临时给color属性加上!important验证是否是优先级问题，测试代码如下：

  #id::before {
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding: 8px;
    vertical-align: middle;
    color: red !important;
  }
  

  如果添加后颜色生效，说明确实是优先级问题，后续调整选择器的权重即可，不推荐直接用!important作为最终解决方案。
• 第三步：排查语法和其他干扰属性
  检查你写的color属性前后是否漏写分号导致CSS语法错误，同时确认当前元素没有设置filter、text-shadow等会干扰文字颜色展示的属性。

内容的提问来源于stack exchange，提问作者asking for a friend