XF 2.1 Changing picture on categories' from speech bubbles

[Startingup]

At the moment my forum is a bit boring and all the categories are all pictures of just speech bubbles, I've seen others that are shopping bags, lips etc etc and just wondered if someone wouldn't mind talking me through how to change mine please? thank you

 

[Paul B]

By categories do you mean nodes?

Do you want to change them all to the same icon?

Or have a specific icon per node?

This will change all standard discussion forums from the speech bubble to another font awesome icon:

.node--forum .node-icon .fa-comments::before,
.subNodeLink--forum .node-icon .fa-comments::before,
.subNodeLink.subNodeLink--forum:before,
.structItem-status--discussion::before,
.inputTypes-display--type_discussion .fa-comments:before,
.fa-comment:before
{
    .m-faContent(@fa-var-comments-alt);
}

 

[Startingup]

I would like to change them to different icons if possible, some will stay as bubbles but I thought it would look better to change some, thank you

 

[Paul B]

You can use the node ID to target specific nodes, like so:

.node--id2 .node-icon .fa-comments:before
{
    .m-faContent(@fa-var-comments-alt);
}

 

[Nicolas FR]

Hello,

Is it wrong to code like this ?

.node.node--id57 { &.node--forum { .node-icon i:before {
    .m-faBase();
    .m-faContent(@fa-var-bullhorn);
    } } }

What's the interest to put these ?

.structItem-status--discussion::before,
.inputTypes-display--type_discussion .fa-comments:before,
.fa-comment:before

Thanks

 

[Paul B]

If that works then yes, you can use it.

 

[Nicolas FR]

In fact, i just tried your code and it didn't work

.node--id57 .node-icon .fa-comments:before {
    .m-faContent(@fa-var-bullhorn);
    }

 

[Paul B]

It works for me.

 

[Nicolas FR]

weird...

 

[Startingup]

Where do I add that to, and how do I know what code is for what icons? Sorry if that is a really dumb question

 

[Paul B]

You add it to the extra.less template.

You can see the icon codes here: https://fontawesome.com/icons?dv=gallery

You aren't limited to FA icons.
With the relevant CSS you can use custom images, or anything you like.

 

[Startingup]

Thank you very much, the FA icons look great.

Do all the Nodes have IDs and if so how do I know what they are? I am going to give this a try this morning, thanks again for your help.

 

[Startingup]

I've just tried the top code and it didn't make any changes to the icons at all, I just copied and pasted it into the extra.less template and pressed save , I think this might be a bit too tricky until I have more experience!

 

[l3ta]

I've just tried the top code and it didn't make any changes to the icons at all, I just copied and pasted it into the extra.less template and pressed save , I think this might be a bit too tricky until I have more experience!

Post a link to your site and have a list of the icons you want for each forum and the code will be provided.

 

[Startingup]

Thank you very much but the forum is private so I don't think you'll be able to see it, its www.wiwikau.co.uk if you can?

 

[l3ta]

Thank you very much but the forum is private so I don't think you'll be able to see it, its www.wiwikau.co.uk if you can?

Well, it really doesn't matter as long as we get the correct node number and the icon you want. So, how many nodes do you have and what are the icons you want for each?

 

[Startingup]

Thank you, we have about 150 Nodes and I would like different icons for the first ten ideally, the first one is

<i class="fas fa-coffee"></i>​

​

 

[l3ta]

Thank you, we have about 150 Nodes and I would like different icons for the first ten ideally, the first one is

​

<i class="fas fa-coffee"></i>​

​

What is the node number for that one? Hover over the node title and look at the link showing at the bottom of your browser to get the node number.We will start with one and see it if works.

 

[Startingup]

☕ Chat

Talk about anything you like here!

wiwikau.co.uk

Thank you for helping me!

 

[l3ta]

☕ Chat

Talk about anything you like here!

wiwikau.co.uk

Thank you for helping me!

Very well. Give me a few minutes.