JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sosyal-medya-og">
	<ul>
<a href="#FacebookLinki"><li id="facebook"><div></div></li></a>
<a href="#Twitter Linki"><li id="twitter"><div></div></li></a>
<a href="#GooglePlusLinki"><li id="googleplus"><div></div></li></a>
<a href="#RSSLinki"><li id="rss"><div></div></li></a>
	</ul>
</div>

CSS

#sosyal-medya-og ul a li{float:left;list-style:none;height:34px;width:67px;text-align:center;background:#2c2c2c!important;display:block;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;transition:all .4s ease;margin:3px 5px 0 0;padding:9px 0 0!important;}#sosyal-medya-og ul a li div{background-image:url(https://lh3.googleusercontent.com/-dDOZv7dzQ8A/UXyA1s2I_BI/AAAAAAAAFAE/c32c2QT8u0k/s132/css3_sosyal_medya.png);height:15px;width:15px;margin:5px 0 0 26px;}li#facebook:hover{background:#38589f!important}li#twitter:hover{background:#44b0e3!important;}li#googleplus:hover{background:#cd4132!important;}li#rss:hover{background:#f8bc2d!important;}li#facebook div{background-position:0 0;}li#twitter div{background-position:0 -16px;}li#googleplus div{background-position:0 -99px;}li#rss div{background-position:0 -32px;}