title: Changing colour of an icon on hover using background-image
body: <p>I have a few social media icons in my footer that need to change from white to yellow when hovered over. I've managed to produce the effect, only that there is an extra undesired icon layered on top and it remains white.</p>
  
  <p>Here is an example of what I've done:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;li&gt;
    &lt;a class="facebook" href="link" target="_blank"&gt;
     &lt;img src="images/00_social media icons/facebook_white.png"&gt;
    &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.facebook{
       background-image: url('images/00_social media icons/facebook_white.png');
       background-repeat:no-repeat;}
  
  .facebook:hover{
       background-image: url('images/00_social media icons/facebook_yellow.png');
       background-repeat:no-repeat;}
  </code></pre>
  
  <p>Thank you in advance!</p>