如何更改字体真棒图标的颜色

Posted 2023-03-05

【中文标题】如何更改字体真棒图标的颜色

【英文标题】：How to change color of font awesome icons

【发布时间】：2016-09-19 15:39:27

【问题描述】：

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

当用户选择表格行时，我可以应用突出显示table 行并应用特定类。

问题是我无法用row 更改图标，同时突出显示的行background-color 是blue，文本更改为white，但图标仍为蓝色。

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>

【参考方案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>

【参考方案2】：

它很简单。我在下面给出的代码是 l=有点酷，颜色像魔术一样不断变化。使用它和 c MAAGIC..

.fa

    color:black;

    animation: colorchange1 50s;
    -webkit-animation: colorchange1 50s


@keyframes colorchange1

0%   color: green;
15%  color: orange;
30%  color:purple;
45%  color: #e74c3c;
60% color: violet;
75% color: indigo;
90% color: blue;
100% color: black;


@-webkit-keyframes colorchange1 /* Safari and Chrome - necessary duplicate */

    0%   color: green;
    15%  color: orange;
    30%  color:purple;
    45%  color: #e74c3c;
    60% color: violet;
    75% color: indigo;
    90% color: blue;
    100% color: black;

希望可以理解。