कैसे फॉन्ट भयानक चिह्न का रंग बदलने के लिए

Question

मैं एक table कि ng-repeat का उपयोग कर उत्पादन किया जाता है है।

उपयोगकर्ता एक तालिका पंक्ति मैं table पंक्ति को उजागर करने और विशिष्ट वर्ग को लागू करने के लागू करने में सक्षम हूँ का चयन करता है।

समस्या मैं साथ में है कि row भी प्रकाश डाला पंक्ति background-colorblue और white को पाठ परिवर्तन लेकिन आइकन नीला रहने मुसीबत प्रतीक बदलते हो रहा है।

सीएसएस

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

एचटीएमएल

<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

, font-awesome वर्ग आप रंग बदलने के लिए चाहते हैं का चयन क्योंकि एक सीएसएस विशिष्टता मुद्दा हो सकता है।

.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

अपने easy.the कोड मैं नीचे दे दिया है l = शांत की तरह और रंग यह magic.Use की तरह और ग 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;} 
} 

अपनी समझ में आता है उम्मीद है।