.social-icon class selector not formatting my footer

Below is the code to my footer in CSS and my footer in HTML. I got the formatting to work by adding in styling directly to images in the footer. However, the .social-icon class selector was not formatting my code. Just starting with websites. Any assistance would be great!

/*********************************** FOOTER ***********************************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc }

footer img { display: inline-block; width: 20px; height: 20px; margin: 0 5px; }

/* not sure as to why this is not formatting properly since i selected the class. instead i just added styling to the images included in the footer element and sized them accordingly. .social-icon { width: 20px; height: 20px; margin: 0 5px; } */

HTML:

  <footer>
    <a href="http://instagram.com/dakotachantz"><img src="img/twitter-wrap.png" alt="Twitter Logo" class:"social-icon"></a>
    <a href="http://facebook.com/dakotachantz"><img src="img/facebook-wrap.png" alt="Facebook Logo" class:"social-icon"></a>
    <p>&copy; 2016 Dakota Nichols. </p>
  </footer>