css - FontAwesome条纹星星

我正在尝试使用超棒的fa-star-o图标创建条纹星形，如下所示。我使用background-gradient来创建此效果，但不仅仅是覆盖星形图标，它还覆盖了图标周围的整个正方形空间。字体超赞的图标可能无法实现我想实现的目标，因此也欢迎其他建议，但希望使用带有图标的答案。

<script src="https://use.fontawesome.com/eed659c9d4.js"></script>

<style>
  .fa-star-o {
    color: #cbb247;
    font-size: 24px;
    background: repeating-linear-gradient( -45deg, #e6c84b, #e6c84b 2px, #FFF 2px, #FFF 4px);
  }


</style>

<i class="fa fa-star-o"></i>

最佳答案

您可以使用background-clip: text;执行此操作。

.fa-star {
  font-size: 24px;
  position: relative;
}

.fa-star::before {
  background: repeating-linear-gradient( -45deg, #e6c84b, #e6c84b 2px, #FFF 2px, #FFF 4px);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

.fa-star::after {
  content: "\f006";
  position: absolute;
  top: 0;
  left: 0;
  color: #cbb247;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<i class="fa fa-star"></i>

关于css - FontAwesome条纹星星，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51240033/