Заменить шрифт Awesome с изображением на hover

Question

Я работаю с шаблоном, который использует шрифт Awesome для значков социальных сетей. Поскольку один из значков, в которых я нуждаюсь, не входит в Font Awesome, я нашел трюк CSS, чтобы перезаписать определенный значок с помощью настраиваемого образа. Это отлично работает (фа-тумблер на может быть заменен любым случайным значком):

.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», похоже, не делают этого трюка. Есть идеи? Все будет высоко оценено!

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