title: Strange underlines in font-awesome CSS
body: <p>When I hover on font-awesome's icons (when they're stacked together) like below (see picture). I get these strange underlines. Any idea where they could come from?<img src="https://i.stack.imgur.com/T1wgA.png" alt="enter image description here"></p>
  
  <p>Source:</p>
  
  <pre><code>&lt;div class="text-center"&gt;
    &lt;!-- FB --&gt;
    &lt;a href="http://www.facebook.com/share.php?u=${shareURL}" target="_blank" style="color : #555"&gt;
      &lt;i id="facebook" class="fa-3x fa fa-facebook-square"&gt;&lt;/i&gt;
    &lt;/a&gt;
    &lt;!-- Twitter --&gt;
    &lt;a href="http://twitter.com/?status=Sign-Up+for+SolidTranslate+here!:+${shareURL}+@SolidTranslate" target="_blank" style="color : #555"&gt;
      &lt;i id="twitter" class="fa-3x fa fa-twitter-square"&gt;&lt;/i&gt;
    &lt;/a&gt;
    &lt;!-- LinkedIn --&gt;
    &lt;a href="http://www.linkedin.com/shareArticle?url=${shareURL}&amp;title=Sign-Up%20for%20SolidTranslate%20here:%20${shareURL}&amp;summary=To%20get%20started%20translating%20SolidWorks%20files%20register%2\
      0here:%20${shareURL}&amp;source=${shareURL}"
      target="_blank" style="color : #555"&gt;
      &lt;i id="linkedin" class="fa-3x fa fa-linkedin-square"&gt;&lt;/i&gt;
    &lt;/a&gt;
    &lt;!-- Google+ --&gt;
    &lt;a href="https://plus.google.com/share?url=${shareURL}" target="_blank" style="color : #555"&gt;
      &lt;i id="googleplus" class="fa-3x fa fa-google-plus-square"&gt;&lt;/i&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>