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

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,495
Được Like
10,735
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

XenForo 1 XenForo 2
Translate by PVS


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom