1

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

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

4

1 回答 1

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

请参阅垂直和水平居中 FontAwesome 图标的参考

于 2015-11-03T16:55:55.047 回答