title: How to align stacked Font-Awesome icons correctly
body: <p>I have been at this for way too long and have yet to figure out how to stack four font-awesome icons on top of each other. I've gotten to three but I am wanting my icons to look like this <a href="https://i.stack.imgur.com/Tmf9U.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tmf9U.png" alt="four stacked icons"></a> (sorry for crummy image)</p>
  
  <p>Here's the HTML for my three stacked.</p>
  
  <pre><code>&lt;span class="fa-stack fa-4x"&gt;
  &lt;i class="fa fa-circle fa-stack-2x icon-background4"&gt;&lt;/i&gt;
  &lt;i class="fa fa-circle-thin fa-stack-2x icon-background6"&gt;&lt;/i&gt;
  &lt;i class="fa fa-cutlery fa-inverse fa-stack-1x"&gt;&lt;/i&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>The CSS</p>
  
  <pre><code>.icon-stack-1x {
    line-height: inherit;
  }
  .icon-stack-2x {
    font-size: 1.5em;
  }
  </code></pre>