6

I have a table that is produced using the ng-repeat.

When the user selects a table row I'm able to apply to highlight the table row and apply the specific class.

The problem is I am having trouble changing the icons with in that row also the highlighted row background-color is blue and the text changes to white but the icons remain blue.

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>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Troy Bryant
  • 994
  • 8
  • 29
  • 60
  • 1
    Possible duplicate of [How to style icon color, size, and shadow of FontAwesome Icons](https://stackoverflow.com/questions/12272372/how-to-style-icon-color-size-and-shadow-of-fontawesome-icons) – TylerH Aug 03 '22 at 20:46

1 Answers1

12

select the font-awesome class you want to change the color, because could be a CSS specificity issue. 

.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
  • 58,591
  • 15
  • 114
  • 126