Tutorial 2x Node icons with image - Biểu tượng Node bằng hình ảnh cho XenForo 2

[PVS]

Node icons with image - Biểu tượng Node bằng hình ảnh cho XenForo 2

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

Node đã xem

Node chưa xem
​

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

/*** Node icons with image **/
.node.node--idX {
    .node-icon i { display: none; }

    &.node--forum {
        .node-body {
            /*padding-left: 5px;*/
        }
        .node-icon {
            background-image: url('/images/your_image.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
        &.node--read .node-icon {
            opacity: 0.4;
        }
    }
}
/*****/

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

Thay /images/your_image.png bằng vị trí hình ảnh 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

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:

/*** Node icons with image **/
.node {
    .node-icon i { display: none; }

    &.node--forum, &.node--category {
        .node-body {
            /*padding-left: 5px;*/
        }
        .node-icon {
            background-image: url('/images/your_image.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
        &.node--read .node-icon {
            opacity: 0.4;
        }
    }
}
/*****/

Thay /images/your_image.png bằng vị trí hình ảnh của bạn.

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

Nguồn: xenforo.com​