如何更改字体真棒图标的颜色 [英] How to change color of font awesome icons
本文介绍了如何更改字体真棒图标的颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个使用 ng-repeat
生成的 table
.
I have a table
that is produced using the ng-repeat
.
当用户选择表格行时,我可以应用以突出显示table
行并应用特定类.
When the user selects a table row I'm able to apply to highlight the table
row and apply the specific class.
问题是我在更改该 row
中的图标时遇到问题,而且突出显示的行 background-color
是 blue
更改为白色
,但图标保持蓝色.
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>
推荐答案
选择要更改颜色的 font-awesome
类,因为这可能是 CSS 特异性问题.
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>
这篇关于如何更改字体真棒图标的颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文