Html 如何更改字体真棒图标的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37379443/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change color of font awesome icons
提问by Troy Bryant
I have a tablethat is produced using the ng-repeat.
我有一个table使用ng-repeat.
When the user selects a table row I'm able to apply to highlight the tablerow and apply the specific class.
当用户选择表格行时，我可以应用以突出显示该table行并应用特定类。
The problem is I am having trouble changing the icons with in that rowalso the highlighted row background-coloris blueand the text changes to whitebut the icons remain blue.
问题是我在更改图标时遇到问题，row其中突出显示的行background-color也是blue，文本更改为white但图标保持蓝色。
CSS
CSS
.selected{
background-color:#004b89;
color:white;
font-weight:bold;
}
HTML
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>
回答by dippas
select the font-awesomeclass you want to change the color, because could be a CSS specificity issue.
选择font-awesome要更改颜色的类，因为可能是 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>回答by Joish
its easy.the code i have given below is l=kind of cool and the color keep changing like magic.Use it and c The MAAGIC..
它很简单。我在下面给出的代码是 l = 有点酷，颜色像魔法一样不断变化。使用它和 c The 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;}
}
hope its understandable.
希望它可以理解。
