Bootstrap - 鼠标悬停时更改图标图像

Question

我的页脚中有一些图标 link 用于各种社交网络。我希望能够像将鼠标悬停在它们上面时那样更改它们的颜色，但是到目前为止我的所有尝试都没有成功。

这是我目前的代码，它可以正确显示图像，但当然，在鼠标悬停时什么也不做：

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">，同时为 .f-icon 指定 width、height 和 background-image和 .f-icon:hover，但这不起作用；它在比我指定的宽度更长的宽度上重复图像。如果我在背景图像中添加不重复，图标就会消失，所以我真的卡住了。

link to the site