Align Font Awesome icons (fa-2x) with stacked icons (fa-stack)

Question

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

Below is code I've been playing with:

<div class="share-results">
  <a class="fa fa-2x fa-envelope-o" data-toggle="tooltip" title="Share by Email" data-placement="top" href="#"></a>
  <a class="fa fa-2x fa-facebook-square" data-toggle="tooltip" title="Share on Facebook" data-placement="top" href=""></a>
  <a class="fa fa-2x fa-twitter-square" data-toggle="tooltip" title="Share on Twitter" data-placement="top" href=""></a>
  <a class="fa fa-2x fa-stack" data-toggle="tooltip" title="Share by Link" data-placement="top" href="#">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-link fa-stack-1x"></i>
  </a>
</div>

This creates:

It seems like there's just a sizing problem, so I played around with using fa-lg:

And also without any sizing helper on the stacked element:

Does anyone know how to align an icon with fa-2x to a stacked icons?

Answer 1

There is a way to accomplish this task with minimum usage of new CSS styles:

We should use envelope which has the same style as twitter and facebook, I mean square-style with fa-envelope-square class. And make all anchor items stacked:

<div class="share-results">
    <a class="fa-stack fa-1x" data-toggle="tooltip" title="Share by Email" data-placement="top" href="#">
        <i class="fa fa-envelope-square fa-stack-2x"></i>
    </a>
    <a class="fa-stack fa-1x" data-toggle="tooltip" title="Share on Facebook" data-placement="top" href="">
        <i class="fa fa-facebook-square fa-stack-2x"></i>
    </a>
    <a class="fa-stack fa-1x" data-toggle="tooltip" title="Share on Twitter" data-placement="top" href="">
        <i class="fa fa-twitter-square fa-stack-2x"></i>
    </a>
    <a class="fa-stack fa-1x" data-toggle="tooltip" title="Share by Link" data-placement="top" href="#">
        <i class="fa fa-square fa-stack-2x"></i>
        <i class="fa fa-inverse fa-link fa-stack-1x"></i>
    </a>
</div>

In addition to this we change margin between stacked elements to make them look as in your example:

.fa-stack { margin: -2px; }

The result would look like this:

Demo fiddle