Understanding dimensions and alignment of stacked icons

I am having fun with FontAwesome and its stacking mechanism and wanted to create an icon for "non-photo-files" (...whatever that is. I just want to show that it can be done, no deeper purpose...)

see example @ http://jsfiddle.net/mbaas/s00uh5ce/1/

I am constructing a stack combining one icon with a stack of two others (I think they need to be stacked separately because of the vertical adjustment...).

Basically I have blocks like this:

<span class=" fa-stack fa-4x" style="margin-bottom:.6em;margin-right: 1em;padding-top: .6em;">
    <i class="fa fa-file-o  fa-stack-1x fa-3x"></i>
    <span style="top:1em;left:.25em" class="fa fa-stack-1x">
        <i class="fa fa-camera fa-stack-1x"></i>
        <i style="color:red;" class="fa fa-ban fa-stack-2x"></i>
    </span>
</span>

As you see in the fiddle, the indidual icons look great, but I'm struggling with the alignment of these in relation to the surrounding text. What I'd like to see is these icons sharing the same baseline with the text that follows them - but I would not want to apply anything to the text - it would be great if all adjustments could be done within the icons themselves...

Solution

You can apply vertical-align:bottom; to the parent span, so your first one would be:

<span class=" fa-stack fa-1x"  style="margin-bottom:.6em;margin-right: 1em;padding-top: .6em; vertical-align:bottom; ">
    <i class="fa fa-file-o  fa-stack-1x fa-3x"></i>
    <span style="top:1em;left:.25em" class="fa fa-stack-1x">
        <i class="fa fa-camera fa-stack-1x"></i>
        <i style="color:red;" class="fa fa-ban fa-stack-2x"></i>
    </span>
</span>
blablabla

See a reference at Centering FontAwesome icons vertically and horizontally