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

Answer 2

I couldn't figure out a durable solution using the fa-* classes alone, but I did come up with a couple of ways to accomplish this that are admittedly slightly hacky, but not terribly hacky.

The first approach superimposes the fa-link icon, as text, over a normal fa fa-2x fa-square-o icon.

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

<style>
    .stacked {
        position:relative;
    }   
    .stacked:after {
        position: absolute;
        font-family: FontAwesome;
        font-size: .6em;
        top:6px;
        left:4px;
        content: "\f0c1"; /*link icon*/
    }
</style>

The second approach uses a combination of position: fixed and a custom font-size to help the new link align slightly better:

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

<style>
    .stacked2 {
      position: fixed;
      font-size: 1.1em !important;
      top: -7px;
      left: -4px;
    }
</style>

The second approach is a little more accurate, but I've included the first for completeness if you'd like to play around with it. Here are the end results, respectively:

And here's a CodePen example.

I'm not sure if this answers your question, but I hope this helps a little.