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 {
     text-indent: -99999px;
}
#social-wrapper a {
  width: 30px;
  float: left;
}
#social-wrapper .fa {
    display: inline-block;
    vertical-align: middle;
    width: 0;
    text-indent: 99999px;
}