图标分辨率

Question

我使用的字体真棒的图标，然后在悬停他的块（字体要命）这就是我喜欢这个结果enter image description here

而且我有当一个链接被选中，这是什么问题，我有enter image description here

我用引导

.nav > li > a:hover 
 
{ 
 
    background-color: transparent; 
 
} 
 
.iconetwitter 
 
{ 
 
    color: #ffffff; 
 
    width: auto; 
 
    height: 33px; 
 
    position: relative; 
 
    border-radius: 5px; 
 
    transition: background-color color 0.2s, font-size 0.2s , ease-in-out; 
 
} 
 
.iconetwitter:hover , .iconetwitter:focus ,.iconetwitter:active 
 
{ 
 
    color: #1DA1F2; 
 
    background-color: white; 
 
}

<ul class="nav"> 
 
        <li class="contacteicone col-md-3"> 
 
         <a href="#" class="monicone"> 
 
          <span class="fa-stack fa-lg"> 
 
           <i class="fa fa-twitter-square iconetwitter fa-stack-2x"></i> 
 
          </span> 
 
         </a> 
 
        </li> 
 
</ul>

Answer 1

了... ...

奇怪的悬停状态是由您的字体真棒图标的背景颜色引起的。背景比字符大。本着高度纠正这一点，就像这样：

.fa {line-height: 0.85em;} 

或者使用更好的解决方案是这里描述：https://stackoverflow.com/a/27382026/2397550。那么你应该使用这个图标的基本方：http://fontawesome.io/icon/square/

聚焦的图标背后的白色区域是因为你这样做：

.nav > li > a:hover {background-color: transparent;} 

这应该是：

.nav > li > a:hover, .nav > li > a:focus {background-color: transparent;}