FontAwesome Striped Star

Question

I am trying to create a striped star using font-awesome fa-star-o icon like shown below. I used background-gradient to create this effect, but instead of just covering the star icon its covering the entire square space around the icon. May be what I am trying to achieve is not possible with font-awesome icons, so open to other suggestions too, but would prefer an answer with icon.

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

Answer 1

First I would consider using em instead of px to have something more homogeneous that scale with font-size. Then a trick is to combine multiple gradient in order to hide the non needed part.

Of course, this is more a bad hack than a generic solution as you need to do a lot of effort to correctly calculate the gradients and you won't have transparency:

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

Another idea using is to use mask. For this I will rely on the new version of Font Awesome and will consider the full start SVG to be the mask

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

Answer 2

You can do this using 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>