4

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

我使用的第一种方法是：

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

看到：破碎的堆叠图标

这给了我一些东西，两个图标都是左对齐（偏离中心）并且图标出现在文本顶部。

我曾认为包含图标堆栈类的跨度代替单个<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确实有助于它工作，但它并不完美，因为基本图标比顶部的图标大得多。

这是可能的吗？或者我是否在突破应该如何使用堆叠图标的限制？

4

2 回答 2

13

干得好..

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

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

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

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

于 2013-06-17T00:05:47.573 回答
7

这已在 3.2.1-wip 分支中修复。或者你可以等待明天的发布。:)

于 2013-06-17T00:08:44.380 回答