我的页脚中有一些图标链接到各种社交网络。我希望能够改变它们的颜色，就像悬停在它们上面一样，但到目前为止我所有的尝试都没有成功。
这是我目前的代码，它正确显示图像，但当然，鼠标悬停时没有任何作用：
HTML
<a target="_blank" href="#"><img src="http://te-al.co.uk/images/icons/f-icon20.png" alt="follow us on Facebook!"></a>
<a target="_blank" href="#a"><img src="http://te-al.co.uk/images/icons/t-icon20.png" alt="follow us on Twitter!"></a>
<a target="_blank" href="#"><img src="http://te-al.co.uk/images/icons/i-icon20.png" alt="follow us on Instagram!"></a>
<a target="_blank" href="#"><img src="http://te-al.co.uk/images/icons/v-icon20.png" alt="follow us on Vimeo!"></a>
我尝试同时使用<img class="f-icon">和<div class="f-icon">，同时为width和{height指定background-image，.f-icon和.f-icon:hover {1}}但是这不起作用;它会在比我指定的宽度更长的宽度上重复图像。如果我在背景图像中添加无重复，图标就会消失，所以我真的被卡住了。
答案 0 :(得分：1)
您是否有理由使用png文件而不是字体图标？您可以使用字体真棒，然后使用这样的代码段......
<i class="fa fa-facebook"></i>
http://fortawesome.github.io/Font-Awesome/get-started/
然后获取您想要的功能，请按照这些说明进行操作......
Change color when hover a font awesome icon?
这是一个可以做你想要的JSFiddle ......