آداة روابط أيقونات بالتخصيص المناسب لك

<style>

#cnmu-iconsiT{margin:10px auto 0;overflow:hidden;position:relative;clear:both;max-width:300px;}

#InTable{margin:0 -3px;}

#InTable span{float:left;width:25%;}

#InTable a{height:60px;line-height:60px;background-color:#333;margin:0 3px 6px!important;text-align:center;text-decoration:none!important;font-size:30px;display:block;color:#fff;transform:perspective(300px) rotateY(0deg);transition:transform 0.4s linear,background-color 0s linear 0.2s,color 0s linear 0.2s;}

#InTable span:hover a{transform:perspective(300px) rotateY(180deg);transition:transform 0.2s linear,background-color 0s linear 0.1s,color 0s linear 0.1s;}

#InTable i{transition:transform 0s linear 0.2s,text-shadow 0s linear 0.2s;display:block;line-height:inherit;}

#InTable span:hover i{transition:transform 0s linear 0.1s,text-shadow 0s linear 0.1s;transform:scale(-1,1);text-shadow:0 0 50px rgba(255,255,255,0.5);}

#InTable span:nth-child(1):hover a {background-color: #3B5998;}

#InTable span:nth-child(2):hover a {background-color: #00ACED;}

#InTable span:nth-child(3):hover a {background-color: #FD3500;}

#InTable span:nth-child(4):hover a {background-color: #E3316B;}

#InTable span:nth-child(5):hover a {background-color: #F8B706;}

#InTable span:nth-child(6):hover a {background-color: #4183C4;}

#InTable span:nth-child(7):hover a {background-color: #3399CC;}

#InTable span:nth-child(8):hover a {background-color: #EA4C89;}

#InTable span:nth-child(9):hover a {background-color: #3F729B;}

#InTable span:nth-child(10):hover a {background-color: #FF0084;}

#InTable span:nth-child(11):hover a {background-color: #F26300;}

#InTable span:nth-child(12):hover a {background-color: #396FD7;}

@media screen and (max-width : 400px) {#cnmu-iconsiT{max-width:260px;}#InTable span{width:33.33%;}}

</style>

<div id="cnmu-iconsiT">

<div id="InTable">

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-facebook"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-twitter"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-youtube-play"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-instagram"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-snapchat-ghost"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-tumblr"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-paper-plane"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-qq"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-user-secret"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-suitcase"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-html5"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-css3"></i></a></span>

</div>

</div> 
    

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-facebook"></i></a></span>