字体真棒只填充了图标的四分之一

Question

我正在创建一个星级评论系统，并想使用很棒的字体来显示星级。然而，我遇到的困难是我的营销团队希望星星能够以 1/10 的增量显示。有办法实现这一点吗？

我发现了这样的东西：CodePen

然而，这只是覆盖了半颗星。有没有办法：

-webkit-text-fill: 1px black;

Answer 1

这是一个 jsfiddle，演示了使用百分比填充 FontAwesome 星号： https: //jsfiddle.net/vco9r2rt/3/

<!-- html -->
<span class="star fa fa-star"></span>

/* css */
.star {
  display: inline-block;
  position: relative;
  font-size: 100px;
  color: #ddd;
}

.star:after {
  font-family: FontAwesome;
  content: "\f005";
  position: absolute;
  left: 0;
  top: 0;
  width: 60%;
  overflow: hidden;
  color: #f80;
}