css - 在链接中使用字体超棒的堆叠图标

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

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

我曾想过用 icon-stack 类包含跨度来代替单个 <i>将是这样做的方法，但事实并非如此。这很好用:

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

看到:Inline icons

我不确定容器放在哪里<span> ，或者如果需要添加更多样式。我尝试过各种组合。设置 a显示: 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>

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/