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:
Lưu lại là xong.
Để thay đổi biểu tượng khác chỉ cần chỉnh sửa giá trị sau
Bạn muốn một biểu tượng Pro cho 1 kiểu cụ thể?
Bạn muốn một biểu tượng Brand?
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
Chúc các bạn thành công.
Bạn muốn có các biểu tượng trong sidenav trên trang Tài khoản như thế này?
Less:
/* 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);
}
}
}
/*****/
Less:
/* 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ể?
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-
.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?
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.
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
Bài viết liên quan
Được quan tâm
Bài viết mới