title: Align Font Awesome icons (fa-2x) with stacked icons (fa-stack)
body: <p>I'm trying to align 4 icons in a row for the share functionality of a website. When I was using 4 normal icons they aligned perfectly and were the same size. Now I'm trying to have one of them stacked so that it has a border and it's creating some problems</p>
  
  <p>Below is code I've been playing with:</p>
  
  <pre><code>&lt;div class="share-results"&gt;
    &lt;a class="fa fa-2x fa-envelope-o" data-toggle="tooltip" title="Share by Email" data-placement="top" href="#"&gt;&lt;/a&gt;
    &lt;a class="fa fa-2x fa-facebook-square" data-toggle="tooltip" title="Share on Facebook" data-placement="top" href=""&gt;&lt;/a&gt;
    &lt;a class="fa fa-2x fa-twitter-square" data-toggle="tooltip" title="Share on Twitter" data-placement="top" href=""&gt;&lt;/a&gt;
    &lt;a class="fa fa-2x fa-stack" data-toggle="tooltip" title="Share by Link" data-placement="top" href="#"&gt;
      &lt;i class="fa fa-square-o fa-stack-2x"&gt;&lt;/i&gt;
      &lt;i class="fa fa-link fa-stack-1x"&gt;&lt;/i&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This creates:</p>
  
  <p><img src="https://i.stack.imgur.com/KR5kB.png" alt="alignment with 2x"></p>
  
  <p>It seems like there's just a sizing problem, so I played around with using fa-lg:</p>
  
  <p><img src="https://i.stack.imgur.com/Y8bV0.png" alt="alignment with lg"></p>
  
  <p>And also without any sizing helper on the stacked element:</p>
  
  <p><img src="https://i.stack.imgur.com/4LXsw.png" alt="alignment without helper"></p>
  
  <p>Does anyone know how to align an icon with <code>fa-2x</code> to a stacked icons? </p>