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>

见过：Broken Stacked Icon

这给了我两个图标左对齐（偏离中心）并且图标显示在文本顶部的东西。

我原以为包含带有图标堆栈类的跨度代替单个<i>将是实现它的方法，但事实并非如此。这很好用：

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

见过：Inline icons

我不知道在哪里放置容器<span>，或者是否需要添加更多样式。我尝试了各种组合。将a设置为display：block没有帮助（没有其他样式应用于链接）。

当链接中没有文本时，结果是相同的。将.icon-stack容器类设置为display:block确实有用，但它并不完美，因为基本图标比顶部图标大得多。

这有可能吗？或者我是否应该使用堆叠图标的限制？

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>

跨度设置为内联块以确保图标保持原位

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

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

Answer 2

这在3.2.1-wip分支中得到修复。或者你可以等到明天发布。：）

在链接中使用字体很棒的堆叠图标

2 个答案: