I am trying to use a shortcut inside a link. When I use only one icon, everything works fine. But when you try to use a complex icon, it does not appear in the link as a single icon.
The first method I use:
<a href="#" class="tweet"><span class="icon-stack"><i class="icon-circle icon-stack-base"></i><i class="icon-twitter"></i></span>tweetthis</a>
Visible: Broken static icon
This gives me something where two icons are left aligned (out of center) and the icons appear on top of the text.
I thought that incorporating a span with an icon class class instead of a single <i> would be a way to do this, but it is not. This works great:
<a href="#" class="tweet"><i class="icon-circle"></i><i class="icon-twitter"></i>tweetthis</a>
Visible: Built-in Icons
I'm not sure where to put the <span> container, or if more styles are added to it. I tried different combinations. Display setting a : the block does not help (there are no other styles applied to the link).
If there is no text in the link, the result will be the same. Setting the .icon-stack container class to display:block helps it work, but it's not perfect, as the base icon is much larger than the icon on top.
Is this something that is possible? Or am I setting limits on how to use stacked icons?
source share