JSFiddle - React, Tailwind, and code Playground
HTML
<!--Facebook-->
<a target="_blank" class="social-icons facebook" href="https://www.facebook.com/apogeeITservices">
</a>
<!--Twitter-->
<a target="_blank" class="social-icons twitter" href="https://twitter.com/apogeeITS">
</a>
<!--Linkedin-->
<a target="_blank" class="social-icons linkedin" href="https://www.linkedin.com/company/apogee-it-services">
</a>
CSS
body{
background:#555559;
}
.social-icons{
width:45px;
height:40px;
display:block;
float:left;
background-repeat:no-repeat !important;
}
.facebook{
background:url("http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social_Media_Icons/Apogee-website-facebook.png");
}
.facebook:hover{
background:url("http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social_Media_Icons/Apogee-website-facebook-hover.png");
}
.twitter{
background:url("http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social_Media_Icons/Apogee-website-twitter.png");
}
.twitter:hover{
background:url("http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social_Media_Icons/Apogee-website-twitter-hover.png");
}
.linkedin{
background:url("http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social_Media_Icons/Apogee-website-linkedin.png");
}
.linkedin:hover{
background:url("http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social_Media_Icons/Apogee-website-linkedin-hover.png");
}