[cXF] Node icons with image

vo6tu7

New member
Staff member
Joined
Dec 1, 2019
Messages
2
Points
3
Would you like to change your default Font Awesome node icons with image like this?

< read node >
node-icons-with-image.png
< unread node >
node-icons-with-image-1.png
To change a single node icon with an image add this code to your extra.less template
Code:
/*** 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;
        }
    }
}
/*****/
Change X with your node ID. (How to find node ID? Help with this resource.)

Replace /images/your_image.png with your image location on the server.

If your node is a categoy, page or link, change .node--forum to .node--category, .node--page or .node--link.

If you'd like to move the image icon more to the right uncomment /*padding-left: 5px;*/ to get it like padding-left: 5px;.

How to change the node icon with the same image for all nodes and categories?

Add this code to your extra.less template:
Code:
/*** 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;
        }
    }
}
/*****/
Replace /images/your_image.png with your image location on the server.
 
Top