Other 2x Adding Social Media Icons to the Headar Section - Thêm các biểu tượng Social vào Header XenForo 2

[PVS]

Adding Social Media Icons to the Headar Section - Thêm các biểu tượng Social vào Header XenForo 2

Thêm code sau vào 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;
    }
}
}

Chuyển đến Ad Management và thêm quảng cáo mới. Chọn vị trí quảng cáo là HEADER trên tất cả các trang, thêm đoạn code sau vào bên dưới và chỉnh sửa các liên kết theo ý bạn.

<ul class="social-network">
    <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="fab fa-twitter"></i></a></li>
     <li><a class="instagram" href="https://www.instagram.com/#" target="_blank"><i class="fab fa-instagram"></i></a></li>
</ul>

Chúc các bạn thành công.

Nguồn: xenforo.com​