Tutorial 2x Icons in sidenav on Account page - Thêm biểu tượng vào sidenav trong trang Tài khoản của XenForo 2

[PVS]

Icons in sidenav on Account page - Thêm biểu tượng vào sidenav trong trang Tài khoản của XenForo 2

Bạn muốn có các biểu tượng trong sidenav trên trang Tài khoản như thế này?

​

Chỉ cần thêm đoạn code sau vào template Extra.less của bạn:

/* Icons in sidenav on Account page */
[data-template="account_alerts"], &[data-template="account_reactions"], &[data-template="account_bookmarks"],
&[data-template="account_details"], &[data-template="account_security"], &[data-template="account_privacy"],
&[data-template="account_preferences"], &[data-template="account_signature"], &[data-template="account_upgrades"],
&[data-template="account_connected"], &[data-template="account_following"], &[data-template="account_ignored"] {
    .p-body-sideNavContent a.blockLink {
        &:before {
            .m-faBase();
            padding-right: 5px;
        }
        &[href*="members/"]:before {
            .m-faContent(@fa-var-user);
        }
        &[href*="account/alerts"]:before {
            .m-faContent(@fa-var-bell);
        }
        &[href*="account/reactions"]:before {
            .m-faContent(@fa-var-thumbs-up);
        }
        &[href*="account/bookmarks"]:before {
            .m-faContent(@fa-var-bookmark);
        }
        &[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);
        }
    }
}
/*****/

Lưu lại là xong.

Để thay đổi biểu tượng khác chỉ cần chỉnh sửa giá trị sau @fa-var-.

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

Nếu bạn có sử dụng route filter, hãy chỉnh sửa code mà bạn đã thay đổi bằng bộ lọc (ví dụ: nếu bạn đang sử dụng route filter cho account , 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​