如何更改Font Awesome图标的颜色

Question

我有一个使用`ng-repeat`产生的`table`。

当用户选择了一行表格时，我能够突出显示该行，并应用特定的类。

问题是我无法更改该行中的图标，而突出显示的行的背景颜色为蓝色，并且文本变为白色，但图标仍然是蓝色。

CSS

.selected{
   background-color:#004b89;
   color:white;
   font-weight:bold;       
}

HTML

<tr ng-repeat="item in vm.items ng-class="{'selected':$index == vm.selectedRow}" class="table-striped" ng-click="vm.setClickedRow($index)">
<td><a  tooltip-placement="top"><i class="fa fa-pencil fa-2x link-icon"></i>     </a>
<td><a  tooltip-placement="top"><i class="fa fa-trash fa-2x link-icon"></i></a>
</tr>

- Troy Bryant

---

可能是如何为FontAwesome图标设置颜色、大小和阴影的样式的重复问题。 - TylerH

Answer 1

选择你想要改变颜色的font-awesome类，因为这可能是CSS特异性问题。

.not-selected .fa-pencil {
  color: red
}
.not-selected .fa-trash {
  color: green
}
.selected {
  background-color: #004b89;
  color: white;
  font-weight: bold;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<table>
  <tr class="not-selected">
    <td><a tooltip-placement="top"><i class="fa fa-pencil fa-2x link-icon"></i></a>
      <td><a tooltip-placement="top"><i class="fa fa-trash fa-2x link-icon"></i></a>
  </tr>
  <tr class="selected">
    <td><a tooltip-placement="top"><i class="fa fa-pencil fa-2x link-icon"></i></a>
      <td><a tooltip-placement="top"><i class="fa fa-trash fa-2x link-icon"></i></a>
  </tr>
</table>

- dippas