替换字体真棒与悬停图像

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