0

我正在尝试使用 font-awesomefa-star-o图标创建一个条纹星，如下所示。我使用背景渐变来创建这种效果，但不是仅仅覆盖星形图标，而是覆盖图标周围的整个方形空间。字体真棒图标可能无法实现我想要实现的目标，因此也可以接受其他建议，但更喜欢带有图标的答案。

在此处输入图像描述

<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>

4

2 回答 2

0

首先，我会考虑使用em而不是px拥有与font-size. 然后一个技巧是组合多个渐变以隐藏不需要的部分。

当然，这比通用解决方案更糟糕，因为您需要付出很多努力才能正确计算梯度并且您不会有透明度：

.fa-star-o {
  color: #cbb247;
  background:
   linear-gradient(#fff,#fff) right/14% 100%,
   linear-gradient(#fff,#fff) left/14% 100% ,
   linear-gradient(#fff,#fff) top/100% 14% ,
   linear-gradient(#fff,#fff) top left/39% 35%,
   linear-gradient(#fff,#fff) top right/43% 35%,
   linear-gradient(#fff,#fff) bottom right/27% 48%,
   linear-gradient(#fff,#fff) bottom left/27% 48%,
   linear-gradient(to top left,#fff 50%,transparent 50%) bottom left/51% 24%,
   linear-gradient(to top right,#fff 50%,transparent 50%) bottom right/51% 24%,
   repeating-linear-gradient( -45deg, #e6c84b, #e6c84b 0.1em, #FFF 0.1em, #FFF 0.2em);
  background-repeat:no-repeat;
}
<script src="https://use.fontawesome.com/eed659c9d4.js"></script>

<i class="fa fa-star-o fa-5x" style="font-size:100px;"></i>

<i class="fa fa-star-o fa-5x"></i>
<i class="fa fa-star-o fa-3x"></i>

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

使用的另一个想法是使用mask. 为此，我将依赖新版本的 Font Awesome，并将完整的开始 SVG 视为掩码

.fa-star {
  color: #cbb247;
  background: repeating-linear-gradient( -45deg, #e6c84b, #e6c84b 0.1em, #FFF 0.1em, #FFF 0.2em);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 576 512" ><path fill="black" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" ></path></svg>') center/contain;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 576 512" ><path fill="black" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" ></path></svg>') center/contain;
}
<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>

<i class="far fa-star fa-5x" style="font-size:150px;"></i>

<i class="far fa-star fa-5x"></i>
<i class="far fa-star fa-3x"></i>

<i class="far fa-star fa-2x"></i>

于 2018-07-09T10:56:56.133 回答
0

您可以使用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>

于 2018-07-09T07:33:53.137 回答