css - 带有 css 的 Font Awesome 图标上的多色

Question

我升级了我的评级插件，使用 Font 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>

当前结果

预期结果

Answer 1

网页设计中一切皆有可能，但也许您设法使用了一些技巧:

i
{
  float:left;
  position: relative;
}
.ratingbox
{
    display: block;
    clear: both;
}
.fa-star-half-o,.fa-star
{
    color: #ffab00;
  
}
.rated{
    color: #ffab00;
    cursor: pointer;
}

.unrated{
    color: #757575;
    cursor: pointer;
}

.fa-star-half-empty:after, .fa-star-half-full:after, .fa-star-half-o:after {
    content: "\f123";
    transform: rotateY(-180deg);
    display: inline-block;
    left: 6px;
    position: absolute;
    top: 0;
    color: #757575;
    overflow: hidden;
    width: 8px;
}

<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>

注意:我只是将 fa-star-half-o 字符添加到 after 元素，我的意思是这个 content: "\f123"; 然后反转它 transform: rotateY(-180deg); 和半宽度和绝对位置你可以看到这里发生了什么:

.fa-star-half-empty:after, .fa-star-half-full:after, .fa-star-half-o:after {
    content: "\f123";
    transform: rotateY(-180deg);
    display: inline-block;
    left: 6px;
    position: absolute;
    top: 0;
    color: #757575;
    overflow: hidden;
    width: 8px;
}

它不干净但聊胜于无!