使用CSS在FontAwesome图标上实现多色效果

Question

使用CSS在FontAwesome图标上实现多色效果

4

我已经使用字体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>

当前结果

期望结果

- Shafeeq

2个回答

2

你可以使用CSS的::before和::after伪元素，参考这里的CSS Unicode。

添加一个额外的.unrated星级。
为half-o添加2个伪元素：::before和::after。
确保伪元素是绝对的，而half-o是相对的。
为了清晰地填充半颗星的右侧，请将::before伪元素明确设置为color:grey。

演示

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

.fa-star-half-o {
  position: relative;
}


.fa-star-half-o:after {
  font-family: FontAwesome;
  content: '\f089';
  position: absolute;
  z-index: 1;
}

.fa-star-half-o:before {
  font-family: FontAwesome;
  content: '\f089';
  position: absolute;
  color: grey;
  z-index: 1;
}

<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 unrated"></i><i class="fa fa-star unrated"></i>
</div>

- zer00ne

你好，float: left 附近缺少一个分号。 - Nigel Fds

@NigelFds 您好，感谢您的提醒。但是，在 CSS 规则集的最后一个属性中不需要分号。实际上，压缩器会在末尾删除分号。无论如何，为了保持一致性，我会添加它。再次感谢。 - zer00ne

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pedram · Accepted Answer

在网页设计中，一切皆有可能，但也许你可以使用一些小技巧：

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>

注意：我只是在after元素中添加了fa-star-half-o字符，我的意思是这样的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;
}

虽然不够干净，但总比没有强！