Bu kodu footer kısımlarında kullanmanız daha doğru olur. Çok güzel gözüktüğünden paylaşma gereği duydum. Kullanmak için fontawesome forumunuza kurulumunu yapmanız gerekmektedir. Yoksa iconlar gözükmeyecektir. Forumda paylaşıldı kurulumu aratarak bulabilirsiniz.
Kod:
<style type="text/css">#sosyal-medya-og ul a li {float:left;list-style:none;height:35px;width:47px;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;}</style><div id="sosyal-medya-og">
<ul>
<a href="Facebook Adresiniz"><li id="facebook"><div></div></li></a>
<a href="Twitter Adresiniz"><li id="twitter"><div></div></li></a>
<a href="Google+ Adresiniz"><li id="googleplus"><div></div></li></a>
<a href="Rss Adresiniz"><li id="rss"><div></div></li></a>
</ul>
</div>
