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

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.

Answer 3

Since the font awesome icons are all about widths, heights and line heights I tried to create a solution where all their values were the same to (hopefully) avoid confusion and to make it easier to update moving forward.
Using the example you gave I set these CSS properties:
.fa {
/*this sets values for all icons*/
color: gray;
font-size: 50px;
line-height: 55px;
text-decoration: none;
}
.fa-link {
/*make inner icon smaller but keep line-height the same so its centered vertically*/
font-size: 30px;
}
.fa-stack-cust {
position: relative;
display: inline-block;
width: 50px;
height: 50px;
line-height: 55px;
}
I wrapped the icons within a un-ordered list and the are now showing all on the same line. Here is the JS.Fiddle showing you a working example. You will be able to see the HTML changes even though they are minor. Hope that helps.