JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<h2>Sprite Icons - Row</h2>

<a href="#" class="icon tel">About</a>
<a href="#" class="icon tel2">Info</a>
<a href="#" class="icon tel3">Contact</a>

<h2>Sprite Icons - Column</h2>

<div>
<a href="#" class="icon tel">About</a><br>
<a href="#" class="icon tel2">Info</a><br>
<a href="#" class="icon tel3">Contact</a><br>
</div>

CSS

body {font-size:10px;color:#0085B2;font-family:Arial;}
h2 {font-size:1.6em;}

.icon {font-size:1em;line-height: 22px;height:1em;position:relative;
margin-left:26px;font-size:1.6em;text-decoration:none;color:#0085B2;
}

.icon::before {
content: "";
width:22px;
height:22px;
position:absolute;
top: 50%;
left: -26px;
transform: translateY(-50%);
background-image: url('http://www.hloe.co.uk/images/apng.png');
}

.icon::after {
content: "";
display:inline-block;
padding-right:0.5em;
}

.tel::before {background-position:0 0;}
.tel2::before {background-position:0 -22px;}
.tel3::before {background-position:0 -44px;}

/* This is a note */