Tutorial 2x [cXF] Icons in Visitor menu - Thêm biểu tượng trong menu Visitor XenForo 2

[PVS]

[cXF] Icons in Visitor menu - Thêm biểu tượng trong menu Visitor XenForo 2

Bạn có muốn thêm các biểu tượng trong menu Visitor như thế này không?

​

Thêm đoạn code này vào template extra.less của bạn:

Spoiler: XF 2.3

/* Icons in Visitor menu */
.menu-content.js-visitorMenuBody .menu-linkRow {
    padding: 6px 5px 6px 12px;
}
.menu-content.js-visitorMenuBody a.menu-linkRow {
    &:before {
        padding-right: 5px;
    }
    &[href*="whats-new/news-feed"]:before {
        .m-faContent(@fa-var-rss);
    }
    &[href*="search/member"]:before {
        .m-faContent(@fa-var-comments);
    }
    &[href*="account/reactions"]:before {
        .m-faContent(@fa-var-thumbs-up);
    }
    &[href*="account/alerts"]:before {
        .m-faContent(@fa-var-bell);
    }
    &[href*="account/account-details"]:before {
        .m-faContent(@fa-var-user-cog);
    }
    &[href*="account/security"]:before {
        .m-faContent(@fa-var-shield-alt);
    }
    &[href*="account/privacy"]:before {
        .m-faContent(@fa-var-lock);
    }
    &[href*="account/preferences"]:before {
        .m-faContent(@fa-var-cogs);
    }
    &[href*="account/signature"]:before {
        .m-faContent(@fa-var-signature);
    }
    &[href*="account/upgrades"]:before {
        .m-faBase('Brands');
        .m-faContent(@fa-var-paypal);
    }
    &[href*="account/connected-accounts"]:before {
        .m-faContent(@fa-var-users-class);
    }
    &[href*="account/following"]:before {
        .m-faContent(@fa-var-user-plus);
    }
    &[href*="account/ignored"]:before {
        .m-faContent(@fa-var-user-minus);
    }
    &[href*="logout"]:before {
        .m-faContent(@fa-var-sign-out);
    }
}
/*****/

Nếu bạn muốn một biểu tượng có một trong các kiểu Font Awesome 5 Pro - light, solid hoặc duotone - hãy sử dụng code ở trên như thế này (ví dụ): .m-faContent(@fa-var-duotone-sign-in);. Như bạn có thể thấy, bạn thêm tên kiểu (trong trường hợp đó duotone) vào bên trong code ngay sau dấu var-.

Spoiler: XF 2.2

/* Icons in Visitor menu */
.menu-content.js-visitorMenuBody .menu-linkRow {
    padding: 6px 5px 6px 12px;
}
.menu-content.js-visitorMenuBody a.menu-linkRow {
    &:before {
        .m-faBase();
        /*padding-right: 5px;*/
    }
    &[href*="whats-new/news-feed"]:before {
        .m-faContent(@fa-var-rss);
    }
    &[href*="search/member"]:before {
        .m-faContent(@fa-var-comments);
    }
    &[href*="account/reactions"]:before {
        .m-faContent(@fa-var-thumbs-up);
    }
    &[href*="account/alerts"]:before {
        .m-faContent(@fa-var-bell);
    }
    &[href*="account/account-details"]:before {
        .m-faContent(@fa-var-user-cog);
    }
    &[href*="account/security"]:before {
        .m-faContent(@fa-var-shield-alt);
    }
    &[href*="account/privacy"]:before {
        .m-faContent(@fa-var-lock);
    }
    &[href*="account/preferences"]:before {
        .m-faContent(@fa-var-cogs);
    }
    &[href*="account/signature"]:before {
        .m-faContent(@fa-var-signature);
    }
    &[href*="account/upgrades"]:before {
        .m-faBase('Brands');
        .m-faContent(@fa-var-paypal);
    }
    &[href*="account/connected-accounts"]:before {
        .m-faContent(@fa-var-users-class);
    }
    &[href*="account/following"]:before {
        .m-faContent(@fa-var-user-plus);
    }
    &[href*="account/ignored"]:before {
        .m-faContent(@fa-var-user-minus);
    }
    &[href*="logout"]:before {
        .m-faContent(@fa-var-sign-out);
    }
}
/*****/

Để thay đổi biểu tượng, hãy chỉnh sửa giá trị @fa-var-.

Biểu tượng thương hiệu cho XF 2.2​

Để sử dụng biểu tượng thương hiệu chẳng hạn như PayPal như bạn có thể thấy trong đoạn code trên, hãy thêm .m-faBase('Brands');.

Nếu bạn đang sử dụng route filter, hãy chỉnh sửa code những gì bạn đã thay đổi bằng bộ lọc (ví dụ: nếu bạn đang sử dụng route filter cho account thành một cái gì đó khác, thì hãy chỉnh sửa code trên cho phù hợp.

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

Nguồn: xenforo.com​

 

[PVS]

Update cho XenForo 2.3