带有css

Question

我使用字体真棒图标而非图片升级了我的评级插件。我面临半星级的问题，我不能在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>

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

当前结果

预期结果

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

它不干净但总比没有好！

Answer 2

您可以使用CSS ::before和::after伪元素引用here来获取CSS unicodes。

1. 添加额外的.unrated明星
2. 向half-o添加2个伪元素; ::before和::after
3. 确保伪元素是绝对的，half-o是相对的。
4. 要干净地填充半星的右侧，请将::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>