JSFiddle - React, Tailwind, and code Playground

HTML

<div class="social four columns">
					<h3>Connect With Us</h3>
					<ul>
						<li><a href="#">/schwackcinema</a></li>
						<li><a href="#">@schwack</a></li>
						<li><a href="#">/schwackmv</a></li>
					</ul>
				</div>

CSS

.social ul li {
  display: block;
  list-style: none;
  line-height: 2.6em;
  
}

.social a:before {
  margin-right: 1em;
  position: relative;
  top: 1em;
  height: 36px;
  width: 36px;
}
 .social ul li:nth-of-type(1) a:before {
  content: url("http://schwack.madmantis.co.uk/images/facebook.png");
}
 .social ul li:nth-of-type(2) a:before {
  content: url("http://schwack.madmantis.co.uk/images/twitter.png");
}
 .social ul li:nth-of-type(3) a:before {
  content: url("http://schwack.madmantis.co.uk/images/youtube.png");
}
 .social ul li:nth-of-type(1) a:hover:before {
  content: url("http://schwack.madmantis.co.uk/images/facebook-active.png");
}
 .social ul li:nth-of-type(2) a:hover:before {
  content: url("http://schwack.madmantis.co.uk/images/twitter-active.png");
}
 .social ul li:nth-of-type(3) a:hover:before {
  content: url("http://schwack.madmantis.co.uk/images/youtube-active.png");
}
 ul li {
  list-style: none;
  display: inline;
}