JSFiddle - React, Tailwind, and code Playground

HTML

<div class="soc-cod">
    <a href="#" class="fa">Facebook</a>
    <a href="#" class="vk">В контакте</a>
    <a href="#" class="tv">Twitter</a>
    <a href="#" class="lv">Live Journal</a>
    <a href="#" class="od">Одноклассники</a>
    <a href="#" class="ma">Mail.ru</a>
    <a href="#" class="go">Google</a>
    <a href="#" class="ya">Яндекс</a>
</div>

CSS

.soc-cod a {
	width: 25px;
	height: 25px;
	margin: 0 3px;
	float: left;
    display: block;
    overflow: hidden;
	background: url(http://dle-faq.ru/uploads/posts/2013-06/1371892084_icon_sprite_1.png) no-repeat 0 0;
	text-indent: -9999px;
	-webkit-transition: all linear .3s;
	-moz-transition: all linear .3s;
	-ms-transition: all linear .3s;
	-o-transition: all linear .3s;
	transition: all linear .3s;
}
.soc-cod .fa		{background-position: 0 0;}
.soc-cod .fa:hover	{background-position: 0 -27px;}
.soc-cod .vk		{background-position: -28px 0;}
.soc-cod .vk:hover	{background-position: -28px -27px;}
.soc-cod .tv		{background-position: -57px 0;}
.soc-cod .tv:hover	{background-position: -57px -27px;}
.soc-cod .lv		{background-position: -85px 0;}
.soc-cod .lv:hover	{background-position: -85px -27px;}
.soc-cod .od		{background-position: -113px 0;}
.soc-cod .od:hover	{background-position: -113px -27px;}
.soc-cod .ma		{background-position: -141px 0;}
.soc-cod .ma:hover	{background-position: -141px -27px;}
.soc-cod .go		{background-position: -168px 0;}
.soc-cod .go:hover	{background-position: -168px -27px;}
.soc-cod .ya		{background-position: -196px 0;}
.soc-cod .ya:hover	{background-position: -196px -27px;}