title: FontAwesome Striped Star
body: <p>I am trying to create a striped star using font-awesome <code>fa-star-o</code> 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.</p>
  
  <p><a href="https://i.stack.imgur.com/CKu0q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CKu0q.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://use.fontawesome.com/eed659c9d4.js"&gt;&lt;/script&gt;
  
  &lt;style&gt;
    .fa-star-o {
      color: #cbb247;
      font-size: 24px;
      background: repeating-linear-gradient( -45deg, #e6c84b, #e6c84b 2px, #FFF 2px, #FFF 4px);
    }
    
  
  &lt;/style&gt;
  
  &lt;i class="fa fa-star-o"&gt;&lt;/i&gt;</code></pre>
  </div>
  </div>
  </p>