Redes sociais com efeito hover

Views:
<center>
<ul class="redessociais">
<a href="LINK DO PERFIL" title="Facebook"><li class="icone"><i class="fa fa-facebook" style="color:#fff"></i></li></a>

<a href="LINK DO PERFIL" title="Google+"><li class="icone"><i class="fa fa-google-plus" style="color:#fff"></i></li></a>

<a href="LINK DO PERFIL" title="Pinterest"><li class="icone"><i class="fa fa-pinterest" style="color:#fff"></i></li></a>


<a href="LINK DO PERFIL" title="Instagram"><li class="icone"><i class="fa fa-instagram" style="color:#fff"></i></li></a>

</ul>
</center>

<style>
li.icone{width: 38px; height: 38px; line-height: 38px; background: #E8657B;  text-align: center; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.1); margin: 8px 4px 0 auto; font-size: 26px; font-weight: normal;}

li.icone:hover{background: #000;}

ul.redessociais{margin-top: 5px; margin-left:-2px; padding: 0; list-style: none;}

ul.redessociais li{display: inline-block; padding: 4px;margin-left: 1px;margin-right: 3px;}
</style>
Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage