Angular ng-style无法应用于FontAwesome图标问题咨询

看起来你遇到的问题很典型，我来帮你一步步排查和解决：

问题根源分析 #

FontAwesome的图标很多是通过**CSS伪元素（::before）**来渲染的，直接给<i>标签设置color有时候不会生效——因为伪元素的样式可能没有继承父元素的color，或者你的blue类样式优先级/属性设置有问题。另外，即使移除blue类后没变化，大概率是因为伪元素没有正确继承<i>的颜色值。

具体解决方案 #

1. 先排查blue类的样式优先级 #

如果你的blue类写了类似这样的代码：

.blue {
  color: blue !important;
}

那哪怕你用ng-style设置内联样式，也会被!important覆盖。这时候要么去掉!important，要么用更高优先级的选择器（比如.fa.blue[ng-style]）来覆盖，但更推荐的是直接移除blue类，先确保动态样式能生效。

2. 强制让FontAwesome伪元素继承颜色 #

FontAwesome的默认样式里，部分图标可能会给伪元素单独设置color，导致父元素的color不生效。你可以自定义一个CSS类，强制伪元素继承颜色：

.fa-inherit-color::before {
  color: inherit !important;
}

然后把这个类加到你的<i>标签上：

<i class="fa fa-square fa-inherit-color" ng-style="{'color': portfolio_risk.values.data.datasets[0].backgroundColor[0]}"></i> {{portfolio_risk.values.data.labels[0]}}

这样<i>标签的color就会被伪元素继承，动态设置的颜色就能生效了。

3. 验证数据是否正确绑定 #

另外，你需要确认portfolio_risk.values.data.datasets[0].backgroundColor[0]这个值是否正确输出了合法的颜色格式（比如#ff0000、red、rgb(255,0,0)这类）。可以在模板里先打印出来验证：

<!-- 先验证颜色值是否正确 -->
<p>当前颜色值: {{portfolio_risk.values.data.datasets[0].backgroundColor[0]}}</p>
<i class="fa fa-square fa-inherit-color" ng-style="{'color': portfolio_risk.values.data.datasets[0].backgroundColor[0]}"></i> {{portfolio_risk.values.data.labels[0]}}

如果这个值是空或者格式不合法，那样式肯定不会生效。

4. 替代方案：用ng-class结合预定义颜色类 #

如果动态颜色值是有限的几个选项，也可以用ng-class来切换预定义的CSS类，这样比ng-style更简洁，也能避免优先级问题：

.color-red { color: red; }
.color-blue { color: blue; }
.color-green { color: green; }

<i class="fa fa-square" ng-class="{'color-red': portfolio_risk.values.data.datasets[0].backgroundColor[0] === 'red', 'color-blue': portfolio_risk.values.data.datasets[0].backgroundColor[0] === 'blue'}"></i>

总结 #

最可能的原因就是FontAwesome的伪元素没有继承<i>标签的颜色，加上自定义的fa-inherit-color类就能解决。同时记得验证你的颜色数据是否正确，以及避免!important这种会干扰样式优先级的写法。

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