为何Font Awesome HTML元素自定义样式不生效？附代码示例

嘿，我来帮你捋捋这个问题——你设置了行内color:white但图标颜色没变，大概率是这几个原因之一：

• 优先级更高的CSS样式覆盖了行内样式
  行内样式虽然优先级高，但如果其他CSS规则用了更具体的选择器（比如.sidebar .fab.fa-facebook-f）或者加了!important，就会把你的行内color覆盖掉。你可以打开浏览器的开发者工具（按F12），选中这个图标元素，看「Styles」面板里的color属性是不是被划掉了，旁边会显示是哪个样式规则在作祟。

• Font Awesome图标库没正确加载
  如果图标显示的是一个空心方框而不是Facebook的标志，那说明字体文件根本没加载成功，颜色自然不会生效。你得确认有没有正确引入Font Awesome的CSS文件，而且要注意fab类对应的是品牌图标，所以你引入的CSS必须包含品牌图标库（比如用完整的all.css或者专门的brands.css）。可以看看浏览器控制台有没有404错误，排查文件路径问题。

• 父元素的样式间接影响了图标
  有时候父元素的filter（比如grayscale(100%)）、opacity或者mix-blend-mode属性会让图标颜色看起来不对，哪怕你给图标本身设置了color。检查一下图标所在的父元素有没有这类样式，临时去掉试试能不能恢复颜色。

• 行内样式的小错误（虽然你的代码看起来没问题）
  偶尔会出现拼写错误（比如把color写成colour）、引号没闭合的情况，不过你的代码里style="color:white"是正确的，这条可以快速排除。

快速排查小技巧 #

1. 先在开发者工具里给图标元素手动加!important测试：color: white !important;，如果颜色变了，就说明是样式优先级的问题，调整你的CSS选择器权重就行。
2. 查看元素的「Computed」面板，确认最终生效的color值是什么，追踪它的来源。

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