当我将font-awesome的图标(当它们堆叠在一起时)悬停在下面时(见图).我得到了这些奇怪的下划线.知道他们可以来自哪里?
资源:
<div class="text-center"> <!-- FB --> <a href="http://www.facebook.com/share.PHP?u=${shareURL}" target="_blank" style="color : #555"> <i id="facebook" class="fa-3x fa fa-facebook-square"></i> </a> <!-- Twitter --> <a href="http://twitter.com/?status=Sign-Up+for+SolidTranslate+here!:+${shareURL}+@SolidTranslate" target="_blank" style="color : #555"> <i id="twitter" class="fa-3x fa fa-twitter-square"></i> </a> <!-- LinkedIn --> <a href="http://www.linkedin.com/shareArticle?url=${shareURL}&title=Sign-Up%20for%20SolidTranslate%20here:%20${shareURL}&summary=To%20get%20started%20translating%20SolidWorks%20files%20register%2\ 0here:%20${shareURL}&source=${shareURL}" target="_blank" style="color : #555"> <i id="linkedin" class="fa-3x fa fa-linkedin-square"></i> </a> <!-- Google+ --> <a href="https://plus.google.com/share?url=${shareURL}" target="_blank" style="color : #555"> <i id="googleplus" class="fa-3x fa fa-google-plus-square"></i> </a>
解决方法
这些行通常来自默认(下划线)元素样式.
使用其他元素或删除下划线:
a.social { /* or whatever your class */ text-decoration: none; }