XF 2.0 Change the node icons

[OldCoals]

Back in version 1.x there was an addon to change the read/unread node icons.

Is there similar for version 2 or is there an inbuilt feature?

 

[aiden crook]

I believe you could modify some of this in the default theme to make it work for you. There is also other discussions people have started to make each individual node a different icon too.

 

[AndyB]

The node icons are font awesome. You can add this code to the extra.less template:

.node--forum .node-icon i::before, .node--category .node-icon i::before {
content: "\f085";
}

Replace the "\f085" unicode with one of these icons:

http://fontawesome.io/icons/

 

[Robby]

The node icons are font awesome. You can add this code to the extra.less template:

.node--forum .node-icon i::before, .node--category .node-icon i::before {
content: "\f085";
}

Replace the "\f085" unicode with one of these icons:

http://fontawesome.io/icons/

Can you change the color too?

 

[AndyB]

Can you change the color too?

Yes.

 

[Robby]

Yes.

do you know how?

 

[M@rc]

do you know how?

Add color as shown below :

content: "\f085";
color: red;

 

[VG_AzR]

The node icons are font awesome. You can add this code to the extra.less template:

.node--forum .node-icon i::before, .node--category .node-icon i::before {
content: "\f085";
}

Replace the "\f085" unicode with one of these icons:

http://fontawesome.io/icons/

Thank you for the code, unfortunately it applies to all categories of the forum.

I wish I could customize each category with a different icon
So I tried this code

but it did not work :

.node--forum .node-icon i::before, .node--category14 .node-icon i::before {
content: "\f085";
}

 

[VG_AzR]

A solution ?

 

[VG_AzR]

@BassMan

Can not we do like your template modification to color the categories?

 

[BassMan]

@BassMan

Can not we do like your template modification to color the categories?

Sorry, I'm not sure if I understand the question.

 

[Ozzy47]

Thank you for the code, unfortunately it applies to all categories of the forum.

I wish I could customize each category with a different icon
So I tried this code

but it did not work :

.node--forum .node-icon i::before, .node--category14 .node-icon i::before {
content: "\f085";
}

A solution ?

@BassMan

Can not we do like your template modification to color the categories?

You might want to give people time to reply to your posts before you bump them, someone usually answers posts when they have some free time.

 

[kingjavo]

Thank you for the code, unfortunately it applies to all categories of the forum.

I wish I could customize each category with a different icon
So I tried this code

but it did not work :

.node--forum .node-icon i::before, .node--category14 .node-icon i::before {
content: "\f085";
}

You can inspect the node icon in your browser and get the node id, then use the following code...

.node--id132 .node-icon i::before {
content: "\f085" !important;
}

 

[Mellow1234]

The node icons are font awesome. You can add this code to the extra.less template:

.node--forum .node-icon i::before, .node--category .node-icon i::before {
content: "\f085";
}

Replace the "\f085" unicode with one of these icons:

http://fontawesome.io/icons/

Thanks!.. what would work for the subnodelink s that show the smaller icons?

 

[nocte]

You can also use this small addon: https://xenforo.com/community/resources/node-icon.6285/

 

[Mellow1234]

You can also use this small addon: https://xenforo.com/community/resources/node-icon.6285/

Thanks, never saw that one...

 

[upnet]

I am trying to assign font awesome node icons individually per node.

.node--id60.node--unread .node-icon i::before {
    font-size: 34px;
    content: "\f01b";
    padding: 4px;
    color: #4f80b4;
}
.node--id60.node--read .node-icon i::before {
    font-size: 34px;
    content: "\f01b";
    padding: 4px;
}

I also tried adding !important, as I read that somewhere.

    content: "\f01b" !important;

Something is wrong though, I am getting a replacement of the screenshot below which is not my desired FA, and any unicode I use produces the same thing.

 

[Russ]

I am trying to assign font awesome node icons individually per node.

.node--id60.node--unread .node-icon i::before {
    font-size: 34px;
    content: "\f01b";
    padding: 4px;
    color: #4f80b4;
}
.node--id60.node--read .node-icon i::before {
    font-size: 34px;
    content: "\f01b";
    padding: 4px;
}

I also tried adding !important, as I read that somewhere.

    content: "\f01b" !important;

Something is wrong though, I am getting a replacement of the screenshot below which is not my desired FA, and any unicode I use produces the same thing.

View attachment 191216

Make sure you're looking at the correct codes for Font Awesome

For 2.1: https://fontawesome.com/cheatsheet

For 1.5/2.0 (if your XF1 style supports it, it's probably using 4.7): https://fontawesome.com/v4.7.0/cheatsheet/

f01b is not found on the 2.x cheatsheet.

 

[Ben44]

.node-icon i { display: none; }
.node--id15 .node-icon {
background-image: url('YOUR LOCATION');
background-repeat: no-repeat;
background-position: center;
}

this works for me..

dont forget to change the node ID to your own....

 

[SyTry]

I am trying to assign font awesome node icons individually per node.

.node--id60.node--unread .node-icon i::before {
    font-size: 34px;
    content: "\f01b";
    padding: 4px;
    color: #4f80b4;
}
.node--id60.node--read .node-icon i::before {
    font-size: 34px;
    content: "\f01b";
    padding: 4px;
}

I also tried adding !important, as I read that somewhere.

    content: "\f01b" !important;

Something is wrong though, I am getting a replacement of the screenshot below which is not my desired FA, and any unicode I use produces the same thing.

View attachment 191216

And this one :

.node--id60.node--unread .node-icon i::before {
    font-size: 34px;
    font-family: "FontAwesome";
    content: "\f01b";
    padding: 4px;
    color: #4f80b4;
}
.node--id60.node--read .node-icon i::before {
    font-size: 34px;
    font-family: "FontAwesome";
    content: "\f01b";
    padding: 4px;
}