Come cambiare il colore delle icone fantastiche del font

Question

Ho un table prodotto con lo ng-repeat.

Quando l'utente seleziona una riga della tabella, sono in grado di applicare per evidenziare la riga table e applicare la classe specifica.

Il problema è che sto avendo problemi a cambiare le icone con in quel row anche la riga evidenziata background-color è blue e il testo modifiche white ma le icone rimangono blu.

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> 

Answer 1

selezionare la classe font-awesome si desidera cambiare il colore, perché potrebbe essere un problema di CSS specificità.

.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>

Answer 2

suo codice easy.the ho dato sotto è l = tipo di fresco ed il colore continuare a cambiare come magic.Use e c La 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;} 
} 

spero che sia comprensibile.