2

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.

enter image description here

<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>
Nandita Sharma
  • 13,287
  • 2
  • 22
  • 35
  • 1
    No, that's not possible. As the name suggests, Font Awesome icons are a *font*, they appear like text characters, and can only be styled accordingly. – jonrsharpe Jul 09 '18 at 07:26
  • You can't style just the insides of a font character... background will always affect the rectangle around the character while font-color will always be a solid color. you could try making the star shape with pure css though, maybe that way you could have more control over styling: https://css-tricks.com/examples/ShapesOfCSS/ – Matthias Schmidt Jul 09 '18 at 07:29
  • @MatthiasSchmidt Yeah I am thinking of doing the same only if nothing works :( – Nandita Sharma Jul 09 '18 at 07:32
  • you didn't try flexbox? :p – Temani Afif Jul 09 '18 at 09:22
  • @TemaniAfif Haha :p No, i didnt as i know it wont work :p – Nandita Sharma Jul 09 '18 at 10:10

2 Answers2

1

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>
Furkan Poyraz
  • 672
  • 1
  • 4
  • 14
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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Thanks @Temani Afif. But i think nothing is an easy fix for what i need. I am now going to create a custom font with the stripes as a part of the font itself. :) – Nandita Sharma Jul 09 '18 at 12:15
  • 1
    @NanditaSharma in case you are still intrested, I did an update with a better answer – Temani Afif Mar 13 '20 at 12:14
  • Like I said in the above comment I have already created a font to achieve the above effect but thanks for your efforts and help. I will surely look into to your answer again. – Nandita Sharma Mar 13 '20 at 12:22
  • 1
    @NanditaSharma even if you did a different thing, the question still apply and people can still find it an may be intrested in any solution (either the custom one you made, mine or any new solution that will come) – Temani Afif Mar 13 '20 at 12:30
  • Sure, valid point. Just can you please check and tell the browser support for mask ? and some relevant link where it explains how it works. – Nandita Sharma Mar 13 '20 at 12:32
  • 1
    @NanditaSharma with prefixes, the support is pretty good: https://caniuse.com/#feat=css-masks only IE will fail .. for how it works, You can check the MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/mask – Temani Afif Mar 13 '20 at 12:37