title: Using a font-awesome stacked icon in a link
body: <p>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.</p>
  
  <p>The first method I am using is: </p>
  
  <pre><code>&lt;a href="#" class="tweet"&gt;&lt;span class="icon-stack"&gt;&lt;i class="icon-circle icon-stack-base"&gt;&lt;/i&gt;&lt;i class="icon-twitter"&gt;&lt;/i&gt;&lt;/span&gt;tweetthis&lt;/a&gt;
  </code></pre>
  
  <p>Seen: <a href="http://i.imgur.com/tG8xmmZ.png" rel="nofollow">Broken Stacked Icon</a></p>
  
  <p>That gives me something where the two icons are both left-aligned (off center) and the icons appear over top of the text. </p>
  
  <p>I had thought that including the span with the icon-stack class in place of a single <code>&lt;i&gt;</code> would be the way to do it, but it's not. This works fine:</p>
  
  <pre><code>&lt;a href="#" class="tweet"&gt;&lt;i class="icon-circle"&gt;&lt;/i&gt;&lt;i class="icon-twitter"&gt;&lt;/i&gt;tweetthis&lt;/a&gt;
  </code></pre>
  
  <p>Seen: <a href="http://i.imgur.com/ZJ1kTT0.png" rel="nofollow">Inline icons</a></p>
  
  <p>I am not sure where to put the container <code>&lt;span&gt;</code>, or if there needs to be more styles added to it. I've tried various combinations. Setting the <code>a</code> to display:block doesn't help (there are no other styles applied to the link). </p>
  
  <p>When there is no text in the link, the result is the same. Setting the <code>.icon-stack</code> container class to <code>display:block</code> does help it work, but it's not perfect since the base icon is so much bigger than the icon on top.</p>
  
  <p>It this something that is possible? Or am I pushing the limits of how stacked icons should be used?</p>