了解堆叠图标的尺寸和对齐方式答案

【问题标题】：Understanding dimensions and alignment of stacked icons了解堆叠图标的尺寸和对齐方式
【发布时间】：2015-11-02 15:51:07
【问题描述】：

我对 FontAwesome 及其堆叠机制很感兴趣，并想为“非照片文件”创建一个图标（......不管那是什么。我只是想表明它可以做到，不更深层次的目的...）

见例子@http://jsfiddle.net/mbaas/s00uh5ce/1/

我正在构建一个将一个图标与其他两个图标组合在一起的堆栈（我认为它们需要单独堆叠，因为垂直调整...）。

基本上我有这样的块：

<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>

正如您在小提琴中看到的那样，各个图标看起来很棒，但我正在努力解决这些与周围文本相关的对齐问题。我希望看到这些图标与它们后面的文本共享相同的基线 - 但我不想将 anything 应用于文本 - 如果可以完成所有调整，那就太好了在图标本身...

【问题讨论】：

标签： font-awesome fontawesome-4.4.0

【解决方案1】：

您可以将vertical-align:bottom; 应用于父跨度，因此您的第一个是：

<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

请参阅Centering FontAwesome icons vertically and horizontally 的参考

【讨论】：