替換字體真棒與懸停圖像

Question

我正在使用社交媒體圖標使用Font Awesome的模板。由於我需要的圖標之一不包含在Font Awesome中，因此我找到了一個CSS技巧來通過自定義圖像覆蓋某個圖標。這工作得很好（FA-肘上可以與任何隨機的圖標被替換）：

.home i.fa.fa-toggle-on { 
content:url(\http://www.url.com/image1.png); 
margin-top: 10px; 
} 

然而，徘徊這一形象，當我需要表現出不同的PNG（不同的顏色）。讓我們說「image2.png」。我一直在困惑這一個小時左右，似乎無法修復它。諸如「.home i.fa.fa-toggle-a：hover」之類的命令似乎沒有辦法。有任何想法嗎？一切都將高度讚賞！

與字體真棒 「正常」 的社會化媒體圖標的CSS如下：

/** 
* SOCIAL ICONS 
*/ 
#social-icons { 
padding: 0; 
margin: 0; 
} 
#social-icons li { 
display: inline; 
float: left; 
margin-right: 1px; 
line-height: 32px; 
} 
#social-icons li a { 
display: inline-block; 
width: 40px; 
height: 40px; 
text-align: center; 
margin: 20px 0 0 0; 
-webkit-transition: all 0.25s ease; 
    -moz-transition: all 0.25s ease; 
    -o-transition: all 0.25s ease; 
     transition: all 0.25s ease; 
} 
#social-icons li a:hover { 
height: 80px; 
margin-top: 0; 
background: #fff; 
} 
#social-icons li a i:before { 
position: relative; 
top: 5px; 
font-size: 18px; 
color: #fff; 
-webkit-transition: all 0.25s ease; 
    -moz-transition: all 0.25s ease; 
    -o-transition: all 0.25s ease; 
     transition: all 0.25s ease; 
} 
#social-icons li a:hover i:before { top: 25px; } 

Answer 1

基於此行的CSS

#social-icons li a:hover i:before 

你需要

#social-icons li a:hover i.fa.fa-toggle-on { 
content:url(\http://www.url.com/image2.png); 
}