أيقونات وسائل التواصل الاجتماعي مع التلميحات

هذا الكود هو مثال على كيفية إنشاء أيقونات وسائل التواصل الاجتماعي مع ظهور تلميحات (Tooltips) عند تمرير المؤشر فوقها. هذا النوع من العناصر التفاعلية يُستخدم عادةً في المدونات أو المواقع الإلكترونية لتوجيه الزوار إلى حسابات الوسائط الاجتماعية الخاصة بالمدونة أو الموقع. إليك شرح مفصل للكود وأهميته:

الهيكل العام للكود:

HTML: يحتوي على قائمة من الروابط (<a>) تمثل أيقونات وسائل التواصل الاجتماعي مثل LinkedIn، Twitter، GitHub، وغيرها. كل رابط يحتوي على أيقونة (باستخدام Font Awesome) وتلميحة (Tooltip) تظهر عند التمرير فوق الأيقونة.

CSS: يتحكم في تنسيق الأيقونات والتلميحات، بما في ذلك الألوان، الحجم، الحركات، والظهور.

أهمية الكود في المدونة:

• تحسين تجربة المستخدم: التلميحات (Tooltips) توفر معلومات إضافية للزوار عند التمرير فوق الأيقونات، مما يساعدهم على فهم الغرض من كل أيقونة دون الحاجة إلى النقر عليها.
• زيادة التفاعل: توجيه الزوار إلى حسابات الوسائط الاجتماعية الخاصة بالمدونة يمكن أن يزيد من التفاعل والمتابعة.
• تصميم جذاب: الأيقونات ذات الحركات والتلميحات تضيف لمسة جمالية واحترافية إلى المدونة.
• سهولة الوصول: يمكن للزوار الوصول بسرعة إلى حسابات الوسائط الاجتماعية من أي صفحة في المدونة.

شرح الكود بالتفصيل:

HTML:

<div class="social-icons">
  <a class="social-icon social-icon--codepen">
    <i class="fa fa-codepen"></i>
    <div class="tooltip">Codepen</div>
  </a>
  <!-- باقي الأيقونات -->
</div>

• <div class="social-icons">: حاوية تحتوي على جميع أيقونات الوسائط الاجتماعية.
• <a class="social-icon social-icon--codepen">: كل رابط يمثل أيقونة وسائط اجتماعية. يتم إضافة كلاس خاص لكل منصة (مثل social-icon--codepen، social-icon--github، إلخ).
• <i class="fa fa-codepen"></i>: أيقونة Font Awesome التي تعرض شعار المنصة.
• <div class="tooltip">Codepen</div>: التلميحة التي تظهر عند التمرير فوق الأيقونة.

CSS:

تنسيق عام للأيقونات:

.social-icons {
  display: flex;
}

يجعل الأيقونات تظهر في صف واحد.

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 2.5rem;
  transition: all 0.15s ease;
}

يجعل الأيقونات دائرية ومتساوية في الحجم.

transition: يضيف حركة سلسة عند التمرير أو النقر.

تأثيرات التمرير (Hover):

.social-icon:hover {
  color: #fff;
}
.social-icon:hover .tooltip {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -150%);
}

عند التمرير فوق الأيقونة، يتغير لون النص إلى الأبيض وتظهر التلميحة.

ألوان الأيقونات:

.social-icon--codepen {
  background: #000;
  color: #fff;
}
.social-icon--codepen .tooltip {
  background: #000;
}
.social-icon--codepen .tooltip:after {
  border-top-color: #000;
}

يتم تحديد لون الخلفية والنص لكل أيقونة بناءً على المنصة (مثل Codepen باللون الأسود، LinkedIn باللون الأزرق، إلخ).

تنسيق التلميحات (Tooltips):

.tooltip {
  position: absolute;
  top: 0;
  left: 50%;
  padding: 0.8rem 1rem;
  border-radius: 40px;
  font-size: 0.8rem;
  opacity: 0;
  transform: translate(-50%, -100%);
  transition: all 0.3s ease;
}
.tooltip:after {
  content: "";
  border: solid;
  border-width: 10px 10px 0 10px;
  border-color: transparent;
}

التلميحات تظهر فوق الأيقونات مع حركة سلسة.

:after: يضيف سهمًا صغيرًا أسفل التلميحة.

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

• إضافة الروابط الفعلية: قم بتحديث الروابط (<a>) بإضافة رابط الحساب الفعلي لكل منصة (مثل href="https://github.com/اسم-المستخدم").
• تخصيص الأيقونات: يمكنك إضافة أو إزالة أيقونات بناءً على المنصات التي تستخدمها.
• تحسين الأداء: تأكد من أن مكتبة Font Awesome مُحمّلة بشكل صحيح لعرض الأيقونات.

مثال عملي:

إذا كنت تدير مدونة وتريد توجيه الزوار إلى حساباتك على LinkedIn وGitHub، يمكنك استخدام هذا الكود مع تحديث الروابط كالتالي:

<a class="social-icon social-icon--linkedin" href="https://linkedin.com/اسم-المستخدم">
  <i class="fa fa-linkedin"></i>
  <div class="tooltip">LinkedIn</div>
</a>
<a class="social-icon social-icon--github" href="https://github.com/اسم-المستخدم">
  <i class="fa fa-github"></i>
  <div class="tooltip">Github</div>
</a>

الكود كاملا

<div class="social-icons">
  <a class="social-icon social-icon--codepen">
    <i class="fa fa-codepen"></i>
    <div class="tooltip">Codepen</div>
  </a>
  <a class="social-icon social-icon--github">
    <i class="fa fa-github"></i>
    <div class="tooltip">Github</div>
  </a>
  <a class="social-icon social-icon--twitter">
    <i class="fa fa-twitter"></i>
    <div class="tooltip">Twitter</div>
  </a>
  <a class="social-icon social-icon--dribbble">
    <i class="fa fa-dribbble"></i>
    <div class="tooltip">Dribbble</div>
  </a>
  <a class="social-icon social-icon--instagram">
    <i class="fa fa-instagram"></i>
    <div class="tooltip">Instagram</div>
  </a>
  <a class="social-icon social-icon--linkedin">
    <i class="fa fa-linkedin"></i>
    <div class="tooltip">LinkedIn</div>
  </a>
  <a class="social-icon social-icon--facebook">
    <i class="fa fa-facebook"></i>
    <div class="tooltip">Facebook</div>
  </a>
</div>
    

    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
/* Demo */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* Color Variables */
/* Social Icon Mixin */
/* Social Icons */
.social-icons {
  display: flex;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 0.5rem;
  border-radius: 50%;
  cursor: pointer;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 2.5rem;
  text-decoration: none;
  transition: all 0.15s ease;
}
.social-icon:hover {
  color: #fff;
}
.social-icon:hover .tooltip {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -150%);
}
.social-icon:active {
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5) inset;
}
.social-icon--linkedin {
  background: #006599;
  color: #fff;
}
.social-icon--linkedin .tooltip {
  background: #006599;
  color: currentColor;
}
.social-icon--linkedin .tooltip:after {
  border-top-color: #006599;
}
.social-icon--twitter {
  background: #2b97f1;
  color: #fff;
}
.social-icon--twitter .tooltip {
  background: #2b97f1;
  color: currentColor;
}
.social-icon--twitter .tooltip:after {
  border-top-color: #2b97f1;
}
.social-icon--codepen {
  background: #000;
  color: #fff;
}
.social-icon--codepen .tooltip {
  background: #000;
  color: currentColor;
}
.social-icon--codepen .tooltip:after {
  border-top-color: #000;
}
.social-icon--facebook {
  background: #3b5a9b;
  color: #fff;
}
.social-icon--facebook .tooltip {
  background: #3b5a9b;
  color: currentColor;
}
.social-icon--facebook .tooltip:after {
  border-top-color: #3b5a9b;
}
.social-icon--instagram {
  background: #527fa6;
  color: #fff;
}
.social-icon--instagram .tooltip {
  background: #527fa6;
  color: currentColor;
}
.social-icon--instagram .tooltip:after {
  border-top-color: #527fa6;
}
.social-icon--dribbble {
  background: #ef5a92;
  color: #fff;
}
.social-icon--dribbble .tooltip {
  background: #ef5a92;
  color: currentColor;
}
.social-icon--dribbble .tooltip:after {
  border-top-color: #ef5a92;
}
.social-icon--github {
  background: #4284c0;
  color: #fff;
}
.social-icon--github .tooltip {
  background: #4284c0;
  color: currentColor;
}
.social-icon--github .tooltip:after {
  border-top-color: #4284c0;
}
.social-icon i {
  position: relative;
  top: 1px;
}

/* Tooltips */
.tooltip {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  padding: 0.8rem 1rem;
  border-radius: 40px;
  font-size: 0.8rem;
  font-weight: bold;
  opacity: 0;
  pointer-events: none;
  text-transform: uppercase;
  transform: translate(-50%, -100%);
  transition: all 0.3s ease;
  z-index: 1;
}
.tooltip:after {
  display: block;
  position: absolute;
  bottom: 1px;
  left: 50%;
  width: 0;
  height: 0;
  content: "";
  border: solid;
  border-width: 10px 10px 0 10px;
  border-color: transparent;
  transform: translate(-50%, 100%);
}
    

معاينة

الخلاصة:

هذا الكود يُعد أداة فعالة لتحسين تجربة المستخدم وزيادة التفاعل مع حسابات الوسائط الاجتماعية الخاصة بالمدونة. يمكن تخصيصه بسهولة ليناسب احتياجاتك، سواء بتغيير الألوان، إضافة أيقونات جديدة، أو تحسين الحركات.