أيقونات السوشيال ميديا تصميم فلات

 إضافة أيقونات السوشيال ميدياً بتصميم فلات بسيط 

يمكنك استخدام الإضافة بعدد أيقونات كبير جداً بالإعتماد على مكتبة Fontawesome

<style>
#side-social{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:10px;}
#side-social a{display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:24px;color:#fff;height:60px;border-radius:4px;transition:box-shadow .4s;}
#side-social a:nth-child(1) {background-color: #375699;}
#side-social a:nth-child(2) {background-color: #333;}
#side-social a:nth-child(3) {background-color: #D41705;}
#side-social a:nth-child(4) {background-color: #8B39A6;}
#side-social a:nth-child(5) {background-color: #26A2E1;}
#side-social a:nth-child(6) {background-color: #F6034E;}
#side-social a:nth-child(7) {background-color: #007AB5;}    
#side-social a:nth-child(8) {background-color: #DF0022;}
  
#side-social a:hover {box-shadow: 0 0 0 100px #000 inset;}
</style>

<div id="side-social">
<a href="#" aria-label="Social Icon" target="_blank" rel="nofollow noopener"><i class="fa-brands fa-facebook-f"></i></a>  
<a href="#" aria-label="Social Icon" target="_blank" rel="nofollow noopener"><i class="fa-brands fa-x-twitter"></i></a>  
<a href="#" aria-label="Social Icon" target="_blank" rel="nofollow noopener"><i class="fa-brands fa-youtube"></i></a>  
<a href="#" aria-label="Social Icon" target="_blank" rel="nofollow noopener"><i class="fa-brands fa-instagram"></i></a>  
<a href="#" aria-label="Social Icon" target="_blank" rel="nofollow noopener"><i class="fa-solid fa-paper-plane"></i></a>  
<a href="#" aria-label="Social Icon" target="_blank" rel="nofollow noopener"><i class="fa-brands fa-tiktok"></i></a>    
<a href="#" aria-label="Social Icon" target="_blank" rel="nofollow noopener"><i class="fa-brands fa-linkedin-in"></i></a>     
<a href="#" aria-label="Social Icon" target="_blank" rel="nofollow noopener"><i class="fa-brands fa-pinterest-p"></i></a>    
</div>

شرح الإستخدام

كل سطر مثل هذا يساوي كود أيقونة

<a href="#" aria-label="Social Icon" target="_blank" rel="nofollow noopener"><i class="fa-brands fa-facebook-f"></i></a>  

رمز # تستبدله بالرابط المراد فتحه

هذا الكود find<i class="fa-brands fa-facebook-f"></i>

يمثل كود الأيقونة تستبدله بالأيقونة المناسبة لك

التنسيق

كذلك كل سطر مثل هذا

#side-social a:nth-child(1) {background-color: #375699;}

يمثل لون الأيقونة الرقم 1 هو رقم الأيقونة فهذا السطر يمثل لون الأيقونة الأولى

عدل على الأكواد كيفما شئت لتخرج بالنتيجة التي تناسبك 

• 💢
• معاينة