javascript - 通过css给html添加图标

Question

我想知道将图标添加到 <td> 的可能性有多大？通过 css 的元素。目前在我的表中(使用 Angular )，如果某个值(分数)大于 75%，我将表中的行设为红色。这有点干扰，所以因为我在页面的其他地方使用了很棒的字体，所以我可能会尝试在乐谱旁边添加一个星号。要更改为红色，我使用 ng-style并调用一个评估分数的方法，然后相应地设置 css。

<tr data-ng-repeat=" item in infractions | orderBy : '-score' | limitTo : 10 " ng-click="launchIAT()" ng-style="setColor(item.score)">
    <td>{{$index + 1}} </td>
    <td>{{item.name.replace("_"," ")}}</td>
    <td>{{item.score.toFixed(3)}}</td>
</tr>

这里是 setColor() js中的方法:

$scope.setColor = function(score){
    if (score >= 75){
        return { background: '#FF4747', color : '#FFFFFF' }
    }else if( score >= 50 && score < 75){
        return {background : '#FFFF47' }
    }
};

我想知道是否可以使用 ng-show虽然我不知道里面有没有ng-show你可以调用一个方法。比如显示它是否大于 75% 之类的东西？理想情况下，我会喜欢 <i class="fa fa-star"></i>在 {{item.score.toFixed(3)}} 旁边显示大于75%时。

最好的解决方案是什么？提前致谢。

Answer 1

如果你看一下 fontawesome 样式表 https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css您将能够选择 .fa-star 部分...

.fa-star:before {
  content: "\f005";
}

您可以在您的 td 上使用它，通过以太类或直接使用它。

 td {
    position: relative;
font-family: FontAwesome;
    }
        td:before /* OR */ td.class:before {
          content: "\f005";
        }