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

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

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

ويمكنك تخصيصها كيفما شئت فهي معتمدة على خط الأيقونات 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>  

تنسيق الكود

لديك من 1 الى 12 سطر في الكود مرقمين كل واحد منهم يخص لون خلفية الأيقونة يمكنك تعديل الألوان ان اردت

كيف تستخدم الأيقونة

سطر الأيقونة يكون كالتالي

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

رمز # تستبدله بالرابط المراد فتحه عند الضغط على الأيقونة

الكود المعلم بالأحمر هو كود الأيقونة ويمكنك ان تستبدله بأى كود أيقونة من المكتبة

طبعا يمكنك حذف أسطر ان لم ترد كل هذا العدد من الأيقونات

ويمكنك كذلك زيادة الأسطر ان أردت المزيد لكن عليك كذلك زيادة الأسطر في أكواد الألوان بنفس العدد الذي ستزيده

معاينة

تعديل