If you're using SVG+JS, you might want to use the newer layering method instead.
To stack multiple icons, use the fa-stack class on the parent HTML element of the 2 icons you want to stack. Then add the fa-stack-1x class for the regularly sized icon and add the fa-stack-2x class for the larger icon. fa-inverse can be added to the icon with the fa-stack-1x to help with a knock-out looking effect. You can even throw larger icon classes on the parent to get further control of sizing.
You can use stacked icons right alongside single icons. Since stacked icons are styled by our framework's included CSS to be twice the size of single icons, you'll need to either size down the stacked icon or size up the single icons.
When you stack icons but change the font-size, you'll need to make some adjustments to your CSS to keep the icons aligned.
Some Custom CSS Required
You'll need to write your own custom rules if you change the default font-size of stacked icons as well as depending on your layout needs (by default stacked icons are set to display: inline-block; and vertical-align:middle;).
Used on a parent HTML element of the two icons to be stacked
fa-stack-1x
Used on the icon which should be displayed at base size when stacked
fa-stack-2x
Used on the icon which should be displayed larger when stacked
fa-inverse
Inverts the color of the icon displayed at base size when stacked
Need more power while stacking?
Our SVG + JS method includes powerful ways to mask and layer that allows for rotating an icon on a more granular scale, even by a single degree! If you're using Font Awesome that way, check it out.