替换字体Awesome与图像悬停

Question

我正在使用一个模板，使用字体Awesome的社交媒体图标。因为我需要的一个图标不包括在字体Awesome我发现了一个CSS技巧覆盖一个自定义图像的特定图标。这工作得很好(fa-toggle-on可以替换为任何随机图标):

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

然而，当悬停这个图像时，我需要显示一个不同的PNG(不同的颜色)。我们输入image2。png。我已经困惑了一个小时左右，似乎无法解决它。命令，如"。i.fa回家。"鼠标悬停"似乎不起作用。什么好主意吗?一切都会非常感激!

使用字体Awesome的"普通"社交媒体图标的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);
}