字体很棒，仅填充图标的四分之一

Question

我正在创建一个星星评论系统，想使用 font Awesome 来显示星星。然而，我遇到的困难是我的营销团队希望星星能够以 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;
}

Answer 2

我通过在React Js中实现这一点，你可以轻松地转换这个简单的html css

<div className="star-wrapper">
      <FontAwesomeIcon icon={faStar} className="star-back" />
      <FontAwesomeIcon
        icon={faStar}
        className="star-front"
        style={{ clipPath: `inset(0 ${100 - percentage}% 0 0)` }}
      />
    </div>

CSS

.star-wrapper {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
}

.star-back {
  color: #d3d3d3; /* Gray background for the star */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.star-front {
  color: #ffc107; /* Gold fill for the star */
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 2;
  white-space: nowrap;
}

使用方法

<PartialStar percentage={25} />