XF 2.3 إضافة ايقونات التواصل الاجتماعي في الهيدر

[ناصر]

إضافة ايقونات التواصل الاجتماعي في الهيدر




أضف التالي إلى قالب extra.less

.social-network {
    font-size: 0;
    line-height: 0;
    letter-spacing: -4px;
    padding: 10px 0;
    text-align: center;

    li {
        display: inline-block;
        vertical-align: text-top;
        font-size: 15px;
        line-height: 28px;
        letter-spacing: 0;
        padding: 0 4px;
        text-transform: uppercase;
        font-weight: 600;
        a {
            display: block;
            width: 30px;
            height: 30px;
            color: #FFF;
            background:#58819F;
            border-radius: 4px;
            &:after {
                content: " ";
                display: block;
                clear: both;
                box-sizing: inherit;
            transition: transform 0.4s linear 0s,
            border-top-left-radius 0.1s linear 0s,
            border-top-right-radius 0.1s linear 0.1s,
            border-bottom-right-radius 0.1s linear 0.2s,
            border-bottom-left-radius 0.1s linear 0.3s;
            }
        }
        a.youtube:hover   {
      background-color: #bb0000;
      transform: rotate(360deg);
      border-radius: 50%;
            }
        a.facebook:hover {
            background-color: #3b5998;
            transform: rotate(360deg);
            border-radius: 50%;
        }
        a.twitter:hover   {
      background-color: #00aced;
      transform: rotate(360deg);
      border-radius: 50%;
        }
        a.instagram:hover   {
      background-color: #bc2a8d;
      transform: rotate(360deg);
      border-radius: 50%;
        }
    }
    &:after {
        content: " ";
        display: block;
        clear: both;
        box-sizing: inherit;
    }
}
}

انتقل إلى إدارة الإعلانات وأضف إعلانًا جديدًا. حدد موضع الإعلان كـ HEADER في جميع الصفحات وأضف الكود أدناه وقم بتعديل الروابط وفقًا لما يناسبك.

<ul class="social-network">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <li><a class="youtube" href="https://www.youtube.com/channel/#" target="_blank"><i class="fab fa-youtube"></i></a></li>
    <li><a class="facebook" href="https://www.facebook.com/#" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
    <li><a class="twitter" href="https://twitter.com/#" target="_blank"><i class="fa-brands fa-x-twitter"></i></a></li>
     <li><a class="instagram" href="https://www.instagram.com/#" target="_blank"><i class="fab fa-instagram"></i></a></li>
</ul>

انتهى