圖標分辨率

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;}