成長只是沒有背景的「fa fa」圖標webkit-transform css

我在我的網站上有fa圖標和該圖標後面的小背景。當我添加「變換：尺度（1.2）;」代碼讓懸停時圖標變大，背景也變大。如何解決這個問題？：/成長只是沒有背景的「fa fa」圖標webkit-transform css

這是使整個代碼：

#snav { 
 
    position: fixed; 
 
    top: 28%; 
 
    z-index: 9999; 
 
    font-size: 18px; 
 
    font-family: 'Open Sans', sans-serif; 
 
} 
 

 
#snav ul { list-style: none; } 
 

 
#snav * { 
 
    margin: 0; 
 
    padding: 0; 
 
    outline: 0; 
 
    transition: all .5s ease; 
 
    -webkit-transition: all .5s ease; 
 
    -moz-transition: all .5s ease; 
 
    -o-transition: all .5s ease; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
#snav li a { 
 
    text-decoration: none; 
 
    color: #fafaf9; 
 
    display: block; 
 
    position: relative; 
 
} 
 

 
#snav .fa { 
 
    vertical-align: middle; 
 
    font-size: 18px; 
 
    width: 35px; 
 
    height: 35px; 
 
    line-height: 35px; 
 
    text-align: center; 
 
    position: relative; 
 
    z-index: 4; 
 
} 
 

 
#snav li span { 
 
    font-size: 15px; 
 
    vertical-align: middle; 
 
    height: 35px; 
 
    line-height: 35px; 
 
    width: auto; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    display: block; 
 
    padding: 0 15px; 
 
    position: absolute; 
 
    top: 0; 
 
    visibility: hidden; 
 
    z-index: 3; 
 
} 
 

 
#snav li a:hover .fa { transform: scale(1.2); } 
 

 
.snav li a:hover .fa { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    -webkit-transform: perspective(1px) translateZ(0); 
 
    transform: perspective(1px) translateZ(0); 
 
    box-shadow: 0 0 1px transparent; 
 
    position: relative; 
 
    padding-right: 2.2em; 
 
    -webkit-transition-duration: 0.3s; 
 
    transition-duration: 0.3s; 
 
} 
 

 
#snav li a:hover span { visibility: visible; } 
 
#snav li span { background-color: #555; } 
 

 
/* icons color and background before hover */ 
 

 
#snav li .fa { 
 
    background-color: #EEE; 
 
    color: #555; 
 
} 
 

 
/* icons hover color */ 
 

 
#snav li a:hover .fa { color: #fafaf9; } 
 

 
/* repeated colors from 1 to 10 each hover color repeated after 10 menu items */ 
 

 
#snav li:nth-child(10n+1) span, 
 
#snav li:nth-child(10n+1) a:hover .fa { background-color: #3b2551; } 
 

 
#snav li:nth-child(10n+2) span, 
 
#snav li:nth-child(10n+2) a:hover .fa { background-color: #4EC5DB; } 
 

 
#snav li:nth-child(10n+3) span, 
 
#snav li:nth-child(10n+3) a:hover .fa { background-color: #3DC25D; } 
 

 
#snav li:nth-child(10n+4) span, 
 
#snav li:nth-child(10n+4) a:hover .fa { background-color: #99BE24; } 
 

 
#snav li:nth-child(10n+5) span, 
 
#snav li:nth-child(10n+5) a:hover .fa { background-color: #38c; } 
 

 
#snav li:nth-child(10n+6) span, 
 
#snav li:nth-child(10n+6) a:hover .fa { background-color: #3b5997; } 
 

 
#snav li:nth-child(10n+7) span, 
 
#snav li:nth-child(10n+7) a:hover .fa { background-color: #6a453a; } 
 

 
#snav li:nth-child(10n+8) span, 
 
#snav li:nth-child(10n+8) a:hover .fa { background-color: #0bbff2; } 
 

 
#snav.en { 
 
    left: 0; 
 
    text-align: left; 
 
} 
 

 
#snav.en li span { left: -100px; } 
 

 
#snav.en li a:hover span { left: 35px; }

來源

2017-02-17 kuzmvnovic

您將要發佈一些代碼，顯示您正在嘗試儘快或此問題可能會downvoted和關閉... –

代替使用：

變換：比例（1,2）;

嘗試更改圖標的字體大小。

font-size：10px;

該變換可能會干擾其他代碼。

投票，如果幫助！

來源

2017-02-17 21:59:01

成長只是沒有背景的「fa fa」圖標webkit-transform css

回答

相關問題