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

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,830
Được Like
12,705
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?

Screenshot 2019-11-09 at 12.34.43.png

Node đã xem

Screenshot 2019-11-09 at 12.34.25.png

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:
Mã:
/*** 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:
Mã:
/*** 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​
 

Hướng dẫn sử dụng

Dịch vụ XenForo của VNXF

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom