أصبحت الشبكات الاجتماعية جزءًا لا يتجزأ من الإنترنت الحديث. بفضل وظائفهم الواضحة ، قاموا بإغراء المستخدمين بشكل كبير إلى الإدمان.

أصبحت الشبكات الاجتماعية جزءًا لا يتجزأ من الإنترنت الحديث. بفضل وظائفهم الواضحة ، قاموا بإغراء المستخدمين بشكل كبير إلى الإدمان.
أريد أن أشارك جمهورًا محترمًا أزرار الوسائط الاجتماعية للموقع في CSS خالص و Font Awesome ، والتي كنت أقوم بتخصيص الأنماط طوال اليوم.
أزرار مواقع التواصل الاجتماعية مستديرة
لأزرار وسائل التواصل الاجتماعي. الآن أريد أن أشارككم نسختي من أزرار الوسائط الاجتماعية المستديرة:
اولا:كود html
<div class="social github">
<a href="#" target="_blank"><i class="fa fa-github fa-2x"></i></a>
</div>
<div class="social youtube">
<a href="#" target="_blank"><i class="fa fa-youtube fa-2x"></i></a>
</div>
<div class="social google-pluse">
<a href="#" target="_blank"><i class="fa fa-google-plus fa-2x"></i></a>
</div>
<div class="social twitter">
<a href="#" target="_blank"><i class="fa fa-twitter fa-2x"></i></a>
</div>
<div class="social instagram">
<a href="#" target="_blank"><i class="fa fa-instagram fa-2x"></i></a>
</div>
<div class="social facebook">
<a href="#" target="_blank"><i class="fa fa-facebook fa-2x"></i></a>
</div>
<div class="social skype">
<a href="#" target="_blank"><i class="fa fa-skype fa-2x"></i></a>
</div>
<div class="social vk">
<a href="#" target="_blank"><i class="fa fa-vk fa-2x"></i></a>
</div>
<div class="social odnoklassniki">
<a href="#" target="_blank"><i class="fa fa-odnoklassniki fa-2x"></i></a>
</div>
<div class="social pinterest">
<a href="#" target="_blank"><i class="fa fa-pinterest fa-2x"></i></a>
</div>
<div class="social linkedin">
<a href="#" target="_blank"><i class="fa fa-linkedin fa-2x"></i></a>
</div>
<div class="social telegram">
<a href="#" target="_blank"><i class="fa fa-paper-plane fa-2x"></i></a>
</div>
<div class="social tumblr">
<a href="#" target="_blank"><i class="fa fa-tumblr fa-2x"></i></a>
</div>
<div class="social windows">
<a href="#" target="_blank"><i class="fa fa-windows fa-2x"></i></a>
</div>
<div class="social whatsapp">
<a href="#" target="_blank"><i class="fa fa-whatsapp fa-2x"></i></a>
</div>
<div class="social weibo">
<a href="#" target="_blank"><i class="fa fa-weibo fa-2x"></i></a>
</div>
<div class="social dropbox">
<a href="#" target="_blank"><i class="fa fa-dropbox fa-2x"></i></a>
</div>
آمل أن تكتشف ذلك بإدخال كود HTML للأزرار.
ارتباط بالشبكة الاجتماعية
الآن ، لإدراج رابط إلى ملفك الشخصي أو قناتك أو مجموعتك ، تحتاج إلى إدراج ارتباط إلى شبكتك الاجتماعية في سمة href # بدلاً من رمز. احرص على عدم إزالة الاقتباس المزدوج قبل الرابط وفي نهايته.
تأكد أيضًا من إضافة بعض CSS لجعل الأزرار تعمل كما في المثال الخاص بي.
css ثانيا:كود
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
.social a {
text-align: center;
width: 48px;
height: 48px;
float: left;
background: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);
border-radius: 24px;
margin: 0 10px 10px 0;
padding: 6px;
color: #000;
}
.github a:hover {background: #191919; color: #fff;}
.youtube a:hover {background: #c4302b; color: #fff;}
.google-pluse a:hover {background: #DD4B39; color: #fff;}
.twitter a:hover {background: #00acee; color: #fff;}
.instagram a:hover {background: #3f729b; color: #fff;}
.facebook a:hover {background: #3b5998; color: #fff;}
.skype a:hover {background: #00aff0; color: #fff;}
.vk a:hover {background: #5d84ae; color: #fff;}
.odnoklassniki a:hover {background: #f93; color: #fff;}
.pinterest a:hover {background: #c8232c; color: #fff;}
.linkedin a:hover {background: #0e76a8; color: #fff;}
.telegram a:hover {background: #249bd7; color: #fff;}
.tumblr a:hover {background: #34526f; color: #fff;}
.windows a:hover {background: #125acd; color: #fff;}
.whatsapp a:hover {background: #50b154; color: #fff;}
.weibo a:hover {background: #d52b2b; color: #fff;}
.dropbox a:hover {background: #1087dd; color: #fff;}
تتم إضافة CSS للأزرار إلى ملف CSS لموضوعك أو قالبك لموقعك. مكان إدخال رمز CSS ليس مهمًا. يمكنك لصق الشفرة في الجزء السفلي من ملف css في سطر جديد.
بدءًا من السطر 15 ، توجد أنماط للأزرار. يمكنك حذف الشبكات الاجتماعية غير الضرورية.
على سبيل المثال:
مجموعة من الأزرار المربعة
أيضًا ، إذا كنت لا تحب الأزرار الدائرية ، فسأقترح مجموعة متنوعة من الأزرار المربعة: border-radius: 24px;
border-radius: 10px;
إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا
COMMENTS