Using a font-awesome stacked icon in a link

Question

I am trying to use an icon-stack inside of a link. When I just use a single icon, everything works as normal. But when trying to use a stacked icon, it doesn't appear in the link like a single icon would.

The first method I am using is:

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

Seen: Broken Stacked Icon

That gives me something where the two icons are both left-aligned (off center) and the icons appear over top of the text.

I had thought that including the span with the icon-stack class in place of a single <i> would be the way to do it, but it's not. This works fine:

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

Seen: Inline icons

I am not sure where to put the container <span>, or if there needs to be more styles added to it. I've tried various combinations. Setting the a to display:block doesn't help (there are no other styles applied to the link).

When there is no text in the link, the result is the same. Setting the .icon-stack container class to display:block does help it work, but it's not perfect since the base icon is so much bigger than the icon on top.

It this something that is possible? Or am I pushing the limits of how stacked icons should be used?

Answer 1

Here you go..

<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 set to inline-block to ensure that the icon stays in place

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

Demo: http://jsfiddle.net/aB4nU/1/