title: Stacking Font-Awesome Star Icons (fa-star & fa-star-half)
body: <p>I want to stack the two Font Awesome icons <strong>fa-star</strong> and <strong>fa-star-half</strong>, but I am having alignment issues.  See image below:</p>
  
  <p><img src="https://i.stack.imgur.com/wGJli.png" alt="Attempt to stack fa-star and fa-star-half fails due to alignment of icons"></p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;span class="fa-stack"&gt;
       &lt;i class="fa fa-fw fa-lg fa-star-half fa-stack-1x"&gt;&lt;/i&gt;
       &lt;i class="fa fa-fw fa-lg fa-star fa-stack-1x"&gt;&lt;/i&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>...and my CSS:</p>
  
  <pre><code>a-stack i.fa-star {
      color:transparent;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: orange;
  }
  
  .fa-stack i.fa-star-half {
      color:yellow;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: orange;
  }
  </code></pre>
  
  <p>Note that I do <em>not</em> want to use <strong>fa-star-half-o</strong> which has an unappealing design when used with an outline.</p>
  
  <p>I have tried to use "float," but without success.  If I use "margin-left," the spacing is off.  See image below:</p>
  
  <p><img src="https://i.stack.imgur.com/icdjw.png" alt="enter image description here"></p>
  
  <p>Any help is appreciated.  Thanks!</p>
  
  <p>Jesse</p>