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

Question

我对 FontAwesome 及其堆叠机制很感兴趣，想为 "non-photo-files" 创建一个图标（...不管是什么。我只是想证明它可以完成, 没有更深层次的目的...)

参见示例@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>

正如您在 fiddle 中看到的那样，各个图标看起来很棒，但我很难将它们与周围的文本对齐。我希望看到的是这些图标与它们后面的文本共享相同的基线 - 但我不想对文本应用 anything - 如果所有调整都很好可以在图标本身内完成...

Answer 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

查看参考

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

Understanding dimensions and alignment of stacked icons

font-awesome

fontawesome-4.4.0