在链接中使用字体图标叠加的方法

Question

我正在尝试在链接内使用图标堆叠。当我只使用单个图标时，一切正常。但是当尝试使用堆叠图标时，它不会像单个图标那样出现在链接中。

我正在使用的第一种方法是：

<a href="#" class="tweet"><span class="icon-stack"><i class="icon-circle icon-stack-base"></i><i class="icon-twitter"></i></span>tweetthis</a>

已看到：损坏的堆叠图标

这使得两个图标都左对齐（偏离中心），并且图标显示在文本之上。

我原以为可以使用带有icon-stack类的span代替单个<i>来实现，但事实并非如此。以下方法运行良好：

<a href="#" class="tweet"><i class="icon-circle"></i><i class="icon-twitter"></i>tweetthis</a>

已查看: 内联图标

我不确定应该把容器<span>放在哪里，或者是否需要添加更多的样式。我尝试过各种组合。将a设置为display:block并没有帮助（链接上没有应用其他样式）。

当链接中没有文本时，结果相同。将.icon-stack容器类设置为display:block确实有所帮助，但由于底部图标比顶部图标大得多，这并不完美。

这是可能的吗？还是我正在推动堆叠图标使用的极限？

- helloerik

Answer 1

这是你需要的内容。

<a href="http://google.com">
    <span class="icon-stack">
        <i class="icon-check-empty icon-stack-base"></i>
        <i class="icon-twitter"></i>
    </span>
    link text
    <br/>
</a>

标签设置为 inline-block 以确保图标保持在原位。

body {
    color:#00000;
}
a {
    text-decoration:none;
    color:inherit;
    display:block;
}
span.icon-stack {
    display:inline-block;
}

演示: http://jsfiddle.net/aB4nU/1/

- adaam

---

@helloerik 我已经替你完成了这件事;) - Aditya

Answer 2

这个问题已经在3.2.1-wip分支中得到了修复。或者你可以等待明天的发布版本。:)

- Font Awesome