JSFiddle - React, Tailwind, and code Playground

by chuckcintron

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div id="social-wrapper">
    <a href="http://www.facebook.com/" target="_blank"><i class="fa fa-facebook circle"></i>Facebook</a>
    <a href="http://www.google.com/" target="_blank"><i class="fa fa-google-plus circle"></i>Google</a>
    <a href="http://www.twitter.com/" target="_blank"><i class="fa fa-twitter circle"></i>Twitter</a>
    <a href="http://www.linkedin.com/" target="_blank"><i class="fa fa-linkedin circle"></i>LinkedIn</a>
</div>

CSS

#social-wrapper .fa {
 color: #000;
}
#social-wrapper a {
  color: transparent;
  display: inline-block;
  margin: 0 8px;
  overflow: hidden;
  width: 15px;
}