title: font awesome social media icon stack border
body: <p>I am attempting to build a simple enough social media link for the page footer employing the font awesome icons with a circular background, please code pen:
  <a href="http://codepen.io/anon/pen/ojmJYE" rel="nofollow">http://codepen.io/anon/pen/ojmJYE</a></p>
  
  <pre><code> &lt;i class="fa fa-circle fa-stack-2x icon-background1" &gt;&lt;/i&gt;
  </code></pre>
  
  <p>For the rollover effect I want a '1px black border' around the background circle so it changes from 'solid' to 'outline' with icon remaining - but I cant seem to reference the CSS border property for the circle background?</p>