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:

Spoiler: XF 2.3

/*** Change default FA node icon **/
.node.node--idX .node-icon i {
    &:before {
        .m-faContent(@fa-var-dot-circle, 1em);
    }

    svg {
        display: none;
    }
}
/*****/

Spoiler: XF 2.2

/*** Change default FA node icon **/
.node.node--idX .node-icon i:before {
    .m-faBase();
    .m-faContent(@fa-var-dot-circle, 1em);
}
/*****/

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

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

Cách để thay đổi biểu tượng node bằng cùng một biểu tượng 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:

Spoiler: XF 2.3

/*** Change default FA node icon **/
.node .node-icon i {
    &:before {
        .m-faContent(@fa-var-dot-circle, 1em);
    }

    svg {
        display: none;
    }
}
/*****/

Spoiler: XF 2.2

/*** Change default FA node icon **/
.node .node-icon i:before {
    .m-faBase();
    .m-faContent(@fa-var-dot-circle);
}
/*****/

Để 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.

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');.

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

Nguồn: xenforo.com​

 

[PVS]

Update cho XenForo 2.3