半个 Font Awesome 心形评分 CSS

Question

半个 Font Awesome 心形评分 CSS

3

我正在使用font-awesome fa-heart类生成评分系统。当将整个心形图标填充颜色时，它能正常工作，但是当我尝试只将前半部分的心形图标填充为红色时遇到了问题。我一直在搜索，但总是出现星星而不是半个心形图标，总是完整的心形而不是来自font-awesome。

所使用的Font awesome版本为4.0.3，无法更改...

是否有任何技巧可以解决这个问题？

.full {
  color:red;
}
.half {

}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">

<div class="rating-love ">
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart half"></span>  
     <a href="#reviews"><span>23 Review(s)</span></a>
                    </div>

- Albeis

2

FA是一种图标字体，因此每个图标都是单个字形。据我所知，在HTML/CSS/JS中没有办法让单个字形具有不同的颜色。您可以尝试使用较浅的颜色来表示“部分”心形等。 - jonrsharpe

不会有机器翻译的风格。 - James Douglas

3个回答

4

可以使用文本剪贴板和背景渐变来实现这一点，我希望这个技巧对你也有用。我只是用两种颜色制作了一个渐变，并通过剪辑将它们分开，看起来很好。如果您想要将心的一半变成白色，只需在CSS中更改十六进制代码即可。

.fa-heart.half:before {
    background: -webkit-linear-gradient(180deg,#000 0%, #000 50%,#FF0000 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.full {
  color:red;
}
.half {

}
.fa-heart.half:before {
    background: -webkit-linear-gradient(180deg,#000 0%, #000 50%,#FF0000 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">

<div class="rating-love ">
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart half"></span>  
     <a href="#reviews"><span>23 Review(s)</span></a>
                    </div>

- Robin

1

不错的解决方案！不幸的是，它可能不太兼容跨浏览器，但仍然是一个非常好的想法。 - James Douglas

text-stroke 在IE中不受支持。https://caniuse.com/#feat=text-stroke - James Douglas

@JamesDouglas 是的，不幸的是IE不支持Text-stroke。:( - Robin

1

这正是我寻找的方法。很遗憾它在IE上不起作用，但无论如何，谢谢！ - Albeis

1

如果在IE中有可能实现这个解决方案，我会寻找选项，并在此更新您。 - Robin

3

不使用JavaScript的情况下，你可以将span的宽度减半并隐藏溢出部分。

.full {
  color: red;
  vertical-align:text-bottom;
}

.half {
  color: red;
  width: 8px;
  overflow: hidden;
  vertical-align:text-bottom;
  margin-right: 8px;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">

<div class="rating-love ">
  <span class="fa fa-heart full"></span>
  <span class="fa fa-heart full"></span>
  <span class="fa fa-heart full"></span>
  <span class="fa fa-heart full"></span>
  <span class="fa fa-heart half"></span>
  <a href="#reviews"><span>23 Review(s)</span></a>
</div>

- j08691

这个可以运行，但是在最后一个心形上方有一些边距，破坏了效果... - James Douglas

@JamesDouglas 不正确，最后一个心形图案除了我给它的右边距之外没有其他的边距。所以，没有什么被破坏了。 - j08691

我在电脑上看到了边距。我正在使用OSX上的Firefox浏览器。这是我所看到的屏幕截图链接。 - James Douglas

@JamesDouglas 看起来应该是垂直对齐的问题。 - j08691

可以通过在.full的span中添加vertical-align:text-bottom;来解决这个问题；我已经修改了你的答案以包含它。 - James Douglas

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

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

- Temani Afif · Accepted Answer

这里有另一个想法，你可以通过调整CSS变量轻松获得任何类型的评分：

.rating-love {
  display: inline-grid!important;
}

.rating-love:before,
.rating-love:after {
  content: "\f004  \f004  \f004  \f004  \f004";
  grid-area: 1/1;
}

.rating-love:after {
  white-space: nowrap;
  overflow: hidden;
  width: var(--w);
  color: red;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">

<div class="rating-love fa" style="--w: 50%;"></div>

<br>

<div class="rating-love fa" style="--w: 30%;"></div>

<br>

<div class="rating-love fa" style="--w: 80%;"></div>