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

PVS

Generalissimo
Thành viên BQT
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

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn

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