1

I have some icons in my footer that link to various social networks. I would like to be able to change their colour as when hovering over them however all my attempts so far have been unsuccessful.

Here is my code currently, which displays the images correctly but of course, does nothing on mouseover:

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>

I have tried using both <img class="f-icon"> and <div class="f-icon">, whilst specifying the width, height, and background-image for both .f-icon and .f-icon:hover, however this doesn't work; it repeats the image across a width longer than the width I had specified. If I add no-repeat to background-image, the icons disappear, so I am really stuck.

link to the site

Alex
  • 125
  • 1
  • 2
  • 13

1 Answers1

1

Is there a reason you are using png files instead of font icons? You can use font awesome and then use a snippet like this...

<i class="fa fa-facebook"></i>

http://fortawesome.github.io/Font-Awesome/get-started/

Then to get the functionality you want follow these instructions...

Change color when hover a font awesome icon?

Here's a JSFiddle that does what you want...

http://jsfiddle.net/5hzv3/6/

Community
  • 1
  • 1
abaldwin99
  • 903
  • 1
  • 8
  • 26
  • Thanks, I had no idea font-awesome exists as I'm completely new to web design/dev. I will look into it. – Alex Aug 02 '15 at 13:51
  • 1
    Yea check it out. Font icons solve a variety of problems i.e. zero distortion resizing. – abaldwin99 Aug 02 '15 at 14:42