Tutorial 2x Change default FA node icon - Thay đổi biểu tượng Node FA mặc định của XenForo 2

[PVS]

Change default FA node icon - Thay đổi biểu tượng Node FA mặc định của XenForo 2

Bạn muốn thay đổi biểu tượng node Font Awesome mặc định của mình thành như thế này không?

Node đã xem

Node chưa xem
​

Để thay đổi một biểu tượng node bằng một biểu tượng Font Awesome khác, hãy thêm đoạn code sau vào template Extra.less của bạn:

/*** Change default FA node icon **/
.node.node--idX {
    &.node--forum {

        .node-icon i:before {
            .m-faBase();
            .m-faContent(@fa-var-dot-circle);
        }
        &.node--read .node-icon i:before {
            opacity: 0.4;
        }
    }
}
/*****/

Thay X bằng ID node của bạn.

Nếu node của bạn là một categoy, page hoặc link, hãy thay đổi .node--forum thành .node--category, .node--page hoặc .node--link

Để thay đổi biểu tượng Font Awesome, hãy thay đổi dot-circle (ở ví dụ trên) thành bất kỳ tên biểu tượng khác.

Để thêm một biểu tượng Font Awesome khác cho node chưa đọc, hãy thêm .m-faContent(@fa-var-exclamation-circle); bên dưới đoạn .node-icon i:before {.

Cách để thay đổi biểu tượng node có cùng hình ảnh cho tất cả các node và category:

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

/*** Change default FA node icon **/
.node {
    &.node--forum, &.node--category {

        .node-icon i:before {
            .m-faBase();
            .m-faContent(@fa-var-dot-circle);
        }
        &.node--read .node-icon i:before {
            opacity: 0.4;
        }
    }
}
/*****/

Để thay đổi biểu tượng Font Awesome, hãy thay đổi dot-circle (ở ví dụ trên) thành bất kỳ tên biểu tượng khác.

Để thêm một biểu tượng Font Awesome khác cho node chưa đọc, hãy thêm .m-faContent(@fa-var-exclamation-circle); bên dưới đoạn .node-icon i:before {.

Bạn muốn một biểu tượng Pro cho 1 style cụ thể?
Chỉnh sửa .m-faBase(); và thay nó bằng .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?
Chỉnh sửa .m-faBase(); và thay nó bằng .m-faBase('Brands');.

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

Nguồn: xenforo.com​