Custom node icons

[Ehren]

Most of the font awesome icons are not working.. For example a icon for linux, f17c is a Linux Icon from solid style fab, which doesn't work with theme. Only working icons are from solid style fas.

If you want to use brand icons, you'll need to specify that in the code. Font Awesome 5 has different fonts for Brands

#XF{
    .node--id13 .node-icon i::before{
        content: '\f17c';
        font-family: "Font Awesome 5 Brands";
    }
}

 

[Nicola]

Hello @applelappala

You can add this to your code : font-family: 'Font Awesome 5 Brands';

 

[Nicola]

@Nicola I'll look into that for the next update

Thanks, cause actually the Grid Layout is not usable at all.

 

[Nicola]

@Nicola I'll look into that for the next update

For the next next update ?

 

[Nerdface]

Subnodes don't have classes so you need to target them using their URL.

.subNodeLink[href$='subforum-2.9/']::before{
    content: "\f00d";
}

Replace the subforum-2.9 part with the end of the subforums URL. The URL for the above example is:

https://xenfocus.com/xf2/index.php?forums/subforum-2.9/

Is there a way to accomplish the "read" and "unread" status for custom subnode icons?

I've used the code above, but all subforums appear to always have unread content.

 

[Ehren]

For the next next update ?

Yeah sorry, I had to push the last update out sooner than planned due to 2.1.1. I've got this on my todo list though, with a few other items

 

[Ehren]

Is there a way to accomplish the "read" and "unread" status for custom subnode icons?

Unread subnodes have the .subNodeLink--unread class attached to them. The below code can be used to change the icon for unread nodes.

.subNodeLink.subNodeLink--unread[href$='subforum-2.9/']::before{
    content: "\f00d";
}

 

[Nerdface]

Unread subnodes have the .subNodeLink--unread class attached to them. The below code can be used to change the icon for unread nodes.

.subNodeLink.subNodeLink--unread[href$='subforum-2.9/']::before{
    content: "\f00d";
}

Thanks Ehren, I realised it was more an issue with the icons I selected (brands) - they don't have alternative styles.

 

[Zetion]

'Hello, @Ehren

I added it but it didn't work.

my forum site: "http://terasus.net/forum/index.php"

 

[Nicola]

I think you have to put this code in your extra.less template

 

[Ehren]

'Hello, @Ehren

I added it but it didn't work.

As mentioned above, the code should be added to extra.less which is a template. You have added it to a style property which is incorrect.

 

[Naia]

@Ehren

This no longer works for sub-nodes. Instead, an icon is placed BEFORE the default.

 

[Ehren]

@Ehren

This no longer works for sub-nodes. Instead, an icon is placed BEFORE the default.

The code has changed slightly for 2.2. Try this instead (change the subforum-name.9 value and f00d value to your own)

.subNodeLink[href$='subforum-name.9/'] .fa--xf::before{
    content: "\f00d";
}

 

[Frascos]

@Ehren hey, sorry to bother you but I have one question, is there any way to make the icons keep the same color as the initial image? http://prntscr.com/111hkxi They are like losing the color, is there any way I can fix that?

 

[Ehren]

@Ehren hey, sorry to bother you but I have one question, is there any way to make the icons keep the same color as the initial image? http://prntscr.com/111hkxi They are like losing the color, is there any way I can fix that?

Hello,

The opacity and colour of the icons are changed if there is no new content inside the forum. To remove those filters, add this to your extra.less file:

@node-icon-read-filter: none;
@node-icon-read-opacity: 1;

 

[Qui-Ran Demera]

Dear Ehren,

I did just as you said, well, actually I generally used a new unicode value in the general setting of the Style which worked just fine, EXCEPT ^^ the fact, that the style didn't adapt all the new icons correctly:

Now I thought I could solve that problem using that code of yours in extra.less, but it doesn't work - a good friend of mine said this could be caused by different types of nodes (Article, Poll, etc)...

That's what I used to solve the issue with the boards. For most of them it worked... for some it didn't:

#XF{

.node--id83 .node-icon i::before,

.node--id8 .node-icon i::before,

.node--id7 .node-icon i::before,

.node--id9 .node-icon i::before,

.node--id27 .node-icon i::before,

.node--id31 .node-icon i::before,

.node--id55 .node-icon i::before,

.node--id42 .node-icon i::before,

.node--id43 .node-icon i::before,

.node--id46 .node-icon i::before,

.node--id98 .node-icon i::before{

content: '\f669';

}

}

How can I fix this? Thank you!

 

[Ehren]

Hi @Qui-Ran Demera

I'll need to see a live version of that page. It's unfortunately not possible to provide a solution by looking at a screenshot.

 

[Qui-Ran Demera]

May I send you Log In Details via PM?

 

[Ehren]

May I send you Log In Details via PM?

Sure

 

[Qui-Ran Demera]

Sent Thank you!