JSFiddle - React, Tailwind, and code Playground

by Aaron Kahlhamer

HTML

<!-- using images in the li -->
<ul class="social">
    <li>
        <img src="http://cdn1.iconfinder.com/data/icons/socialnetworking/32/facebook.png" />
        <a href="#">Link text here</a>
    </li>
</ul>

<!-- using background images -->
<ul class="social-backgrounds">
    <li>
        <a href="#">Link text here</a>
    </li>
</ul>

<!-- Some visitors might click on the icon thinking it's clickable. Wrap the A tag around the image. -->
<ul class="social-backgrounds-packaged">
    <li>
        <a href="#">Link text here</a>
    </li>
</ul>

CSS

.social { font-size: 18px; }
.social li { list-style-type: none; }
.social img { display: inline-block; margin-right: 10px; }
.social a { }


.social-backgrounds li { background: url('http://cdn1.iconfinder.com/data/icons/socialnetworking/32/facebook.png') no-repeat 0% 50%;list-style-type: none; padding: 10px 0 10px 40px; }

.social-backgrounds-packaged li { list-style-type:none; }
.social-backgrounds-packaged a {background: url('http://cdn1.iconfinder.com/data/icons/socialnetworking/32/facebook.png') no-repeat 0 0;display:block;line-height:30px;padding:0 0 0 40px;}