How to change color of font awesome icons
27,309
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>
Author by
Troy Bryant
I'm just looking to get better and help other because so many have helped me thus far.
Updated on July 22, 2022Comments
-
Troy Bryant almost 2 years
I have a
table
that is produced using theng-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 rowbackground-color
isblue
and the text changes towhite
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>