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:

Spoiler: XF 2.3

/*** Node icons with image **/
.node.node--idX {
    svg { display: none; }
   .node-subNodeMenu svg {display: initial;}

    &.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;
        }
    }
}
/*****/

Spoiler: XF 2.2

/*** 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:

Spoiler: XF 2.3

/*** Node icons with image **/
.node {
    svg { display: none; }
   .node-subNodeMenu svg {display: initial;}

    &.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;
        }
    }
}
/*****/

Spoiler: XF 2.2

/*** 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​

 

[tailieuvnads]

Thêm icon png từng node như thế nào ạ

 

[PhuongBinzz]

Thêm icon png từng node như thế nào ạ

bài viết cụ thể vậy mà bạn

 

[tailieuvnads]

View attachment 89993bài viết cụ thể vậy mà bạn

Cảm ơn bạn, Andy đã làm được

 

[PVS]

Update cho XenForo 2.3