Font awesome 仅填充图标的四分之一

Question

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

我找到了这样的东西：CodePen

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

-webkit-text-fill: 1px black;

Answer 1

这是一个演示使用百分比填充 FontAwesome 星标的 jsfiddle：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;
}

Font awesome 仅填充图标的四分之一

Font awesome fill only a quarter of an icon

css

font-awesome