web-dev-qa-db-fra.com

Comment changer la couleur des icônes de police génial

J'ai une table produite à l'aide du ng-repeat.

Lorsque l'utilisateur sélectionne une ligne de tableau, je peux l'appliquer pour mettre en surbrillance la ligne table et appliquer la classe spécifique. 

Le problème, c’est que j’ai du mal à changer les icônes dans row. La ligne en surbrillance background-color est blue et le texte devient white, mais les icônes restent bleues.

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>
htmlcssangularjsfont-awesome
6
Troy Bryant

sélectionnez la classe font-awesome dont vous souhaitez modifier la couleur, car cela pourrait être un problème de spécificité 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>

8
dippas

c'est facile.le code que j'ai donné ci-dessous est l = plutôt cool et la couleur continue de changer comme par magie.Utilisez-le et c.

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

j'espère que c'est compréhensible.

0
Joish