将 Font Awesome 替换为悬停时的图像

Question

我正在使用一个模板，该模板将 Font Awesome 用于社交媒体图标。由于我需要的图标之一不包含在 Font 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"。我已经为此困惑了一个小时左右，但似乎无法解决。像“.home i.fa.fa-toggle-on a:hover”这样的命令似乎不起作用。有任何想法吗？一切都会受到高度赞赏！

带有 Font Awesome 的 "normal" 社交媒体图标的 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);
}

将 Font Awesome 替换为悬停时的图像

Replace Font Awesome with image on hover

html

css

fonts

icons