如何使用ngstyle或ngclass在对象中包括字体真棒图标

Question

我们可以使用ngstyle在对象中包含字体真棒图标，以及如何在html中绑定它们？

我尝试了以下代码，但对我不起作用：

$scope.Items = [
 obj: {data:65476756,right:12344,title:"Income"},object:{ "font-size" : "20px", "text-align":"center" ,"icon":"fa fa-level-up"}]

，我的html看起来像这样：

<div my-widget data="item.obj" ng-style="item.object"> 
</div>

Answer 1

ng-style期望对象键是CSS样式名称和值是这些CSS键的相应值。由于没有名为icon的CSS样式，因此被忽略了。 fa fa-level-up是CSS类，应该像类一样使用它们。

因此，您需要更改JS代码：

$scope.Items = [{
 obj: {data:65476756,right:12344,title:"Income"},
 object:{ "font-size" : "20px", "text-align":"center"},
 classes:"fa fa-level-up"
}]

然后在html中使用它，例如：

<div my-widget data="item.obj" ng-style="item.object" ng-class="item.classes"> 
</div>

注意：item.classes是字符串。参考：https：//docs.angularjs.org/api/ng/directive/ngclass

编辑

回答有关大小，颜色，位置的问题：您可以为此使用标准CSS样式。有关更多信息，请检查此链接：https：//fontawesome.com/v4.7.0/examples/

如果更改图标容器的字体大小，则图标获取 大。同样的事情也适合颜色，落影和其他任何东西 使用CSS继承。

另外，您也可以使用fa-2x ... fa-5x。