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:

Spoiler: XF 2.3

/* 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_applications"], &[data-template="account_following"], &[data-template="account_ignored"] {
    .p-body-sideNavContent a.blockLink {
        &[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-faContent(@fa-var-paypal);
        }
        &[href*="account/connected-accounts"]:before {
            .m-faContent(@fa-var-users-class);
        }
        &[href*="account/applications"]:before {
            .m-faContent(@fa-var-grip-horizontal);
        }
        &[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);
        }
    }
}
/*****/

Spoiler: XF 2.2

/* 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-.

Bạn muốn một biểu tượng Pro cho 1 kiểu cụ thể?

Spoiler: XF 2.3

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

Chỉnh sửa .m-faBase(); và thay đổi thành .m-faBase('Pro', @faWeight-solid);, .m-faBase('Pro', @faWeight-regular); hoặc .m-faBase('Pro', @faWeight-light);.

Bạn muốn một biểu tượng Brand?

Spoiler: XF 2.3

Trong XenForo 2.3, bạn không cần phải chỉ định biểu tượng Thương hiệu. Sử dụng code như bạn làm với bất kỳ biểu tượng nào khác.

Spoiler: XF 2.2

Chỉnh sửa .m-faBase(); và thay nó bằng .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​

 

[PVS]

Update cho XenForo 2.3