我已经使用字体awesome图标而不是图片来升级我的评分插件。我在半星评级上遇到了问题,因为我无法替换fa-star-half-o图标上的白色颜色。我想将白色颜色替换为灰色颜色,类似于下面的预期结果。
请帮忙。
代码:
<div class="ratingbox"><i class="fa fa-star"></i><i class="fa fa-star">
</i><i class="fa fa-star-half-o"></i><i class="fa fa-star unrated"></i>
<i class="fa fa-star enlang unrated"></i></div>
i
{
float:left
}
.ratingbox
{
display: block;
clear: both;
}
.fa-star-half-o,.fa-star
{
color: #ffab00;
}
.rated{
color: #ffab00;
cursor: pointer;
}
.unrated{
color: #757575;
cursor: pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="ratingbox">
<i class="fa fa-star"></i><i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i><i class="fa fa-star unrated"></i><i class="fa fa-star enlang unrated"></i>
</div>
当前结果
期望结果
::after
,而不是已经被弃用的CSS2语法:after
。 - James Donnelly