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

 أحيانا يكون وضع روابط يأخذ حيز كبير في المدونة لكن ان تم وضعها بشكل أيقونات يكون المظهر جمالي أكثر وفي نفس الوقت يكون الحيز الذي تشغله أقل

صنعت اضافة مميزة يمكنك استخدامها ليس فقط كإضافة مواقع اجتماعية لكن أيضاً للأيقونات بشكل عام 

ويمكنك تخصيصها كيفما شئت فهي معتمدة على خط الأيقونات Fontawesome بالتالي كل الأيقونات المدعومة في ذلك الخط يمكنك استخدامها

ان لم تكن لديك معلومة عن الخط يمكنك التعرف عليه من هذا الموضوع

تعرف على خط الأيقونات الرائع Font Awesome

كذلك يمكنك زيارة مكتبة الأيقونات لنسخ كود أى أيقونة من هنــــــا

كود الإضافة يمكنك وضعه في آداة HTML/JavaScript

<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>

معاينة