XF 2.1 mode icon

[Faust]

Hello.

Is there is a way to change node icon? Or is there any addons?

Thanks.

 

[Kirby]

Is there is a way to change node icon?

Yes.

Or is there any addons?

Also yes.

You did not ask how to do this but I'll give you some linkes anyway:

[cXF] Node icons with image

Would you like to change your default Font Awesome node icons with image like this? < read node > < unread node > To change a single node icon with an image add this code to your extra.less template: /*** Node icons with image **/...

xenforo.com

[cXF] Change default FA node icon

Would you like to change your default Font Awesome node icons like this? < read node > < unread node > To change a single node icon with a different Font Awesome icon add this code to your extra.less template: Change X with your node...

xenforo.com

Unmaintained - Iconify Custom Node Icons

Important: this add-on requires installation of Iconify Integration add-on. Click here to get Iconify Integration add-on. This add-on makes it possible to set custom icons for each node. For forums and categories you can set read and unread node...

xenforo.com

Unmaintained - Different Node Icons Per Node

To create individual icons per desired node follow these instructions below. Make sure you have the addon TH (Nodes) installed. Also this is an Acknowledgement this is a guide and tutorial for an addon created by @ThemeHouse so the addon rights...

xenforo.com

Unmaintained - Node Icon

Description: Want assign some icons to forums at list, but can't found option for do it? Easy for use addon for set custom Fontawesome icon to your forum nodes help you! Technical description: Extend node class for save icon name. Modify Node...

xenforo.com

[cXF] Coloured Node Icons

Check Free and Premium cXF DIY Customizations on customizexf.com How to change node icon colour to something like that? This is a DIY step-by-step tutorial. Before changing the code let's get prepared: To change the category block header...

xenforo.com

[XFA] Nodes Icon Tweak - XF2

Description Nodes Icon Tweak allows you to easily change the default icons of your nodes (Read, unread, pages and links). Four types of replacement icons are available: Font Awesome Icons loaded from your server Sprite image URL Latest poster...

xenforo.com

 

[Faust]

Thanks a lot. Which one exactly working. As I tried one, and did not work.

 

[Rhody]

I define mine in the extra.less and it works very well. Here are a few from my file, as an example:

.node.node--forum.node--id5 i:before{content:'\f0f1';}
.node.node--forum.node--id6 i:before{content:'\f559';}
.node.node--forum.node--id7 i:before{content:'\f08d';}
.node.node--forum.node--id9 i:before{content:'\f65c';}
.node.node--forum.node--id10 i:before{content:'\f218';}
.node.node--forum.node--id12 i:before{content:'\f6a3';}
.node.node--forum.node--id25 i:before{content:'\f8c4';}

 

[Faust]

I define mine in the extra.less and it works very well. Here are a few from my file, as an example:

Can I do the same with png files? If yes what will be the code. Thanks.

 

[Rhody]

Can I do the same with png files? If yes what will be the code. Thanks.

I used the above links to learn how to do it. Here is an example of the code for extra.less for an external image of your own:

/*** Node icons with image, by node id #. see /ads/nodes/filename.png 50x50 added by rhody/mike 3/2/20 **/
.node.node--id41 {
    .node-icon i { display: none; }

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

 

[Faust]

let me try it

 

[Faust]

I used the above links to learn how to do it. Here is an example of the code for extra.less for an external image of your own:

/*** Node icons with image, by node id #. see /ads/nodes/filename.png 50x50 added by rhody/mike 3/2/20 **/
.node.node--id41 {
    .node-icon i { display: none; }

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

Just tried, seems is not working

 

[Rhody]

Well be sure to replace the node id # in the code with yours (each forum is assigned a unique ID #, 41 was in the above example), and i named the PNG file with the same node id # also, to be organized. You don't have to do that.

 

[Faust]

Well be sure to replace the node id # in the code with yours (each forum is assigned a unique ID #, 41 was in the above example), and i named the PNG file with the same node id # also, to be organized. You don't have to do that.

Still now working

The code below:

/*** Node icons with image, by node id #. see /ads/nodes/filename.png 50x50 added by rhody/mike 3/2/20 **/
.node.node--id50 {
.node-icon i { display: none; }

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

 

[Rhody]

I know it works fine on main menu forums/nodes, I'm not sure if it works on subforums of others. Is it a uk photography forum?

 

[Faust]

I know it works find on main menu forums/nodes, I'm not sure if it works on subforums of others. Is it a uk photography forum?

What do you mean ?

I want only to change node icons.

 

[Hambalie]

I define mine in the extra.less and it works very well. Here are a few from my file, as an example:

\f559
\f08d

what is this code ?
any referred site ?

 

[Paul B]

Font Awesome icons.

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

fontawesome.com

https://fontawesome.com/v6.0/icons?d=gallery&p=1&q=speech&s=solid