Question

我正在玩FontAwesome及其堆叠机制，并想为＆＃34;非照片文件创建一个图标＆＃34; （ ......无论那是什么。我只想表明它可以完成，没有更深层的目的......）

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

正如你在小提琴中所看到的那样，偶然的图标看起来很棒，但是我对这些与周围文本的对齐进行了挣扎。我希望看到的是这些图标与其后面的文本共享相同的基线 - 但我不想将任何应用于文本 - 如果所有调整都可以在图标本身内完成......

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

上的参考资料

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

1 个答案: