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

 

[l3ta]

OK. Copy and paste the following code into extra.less:

.block-body{

.node--id2 .node-icon i::before{ content: "\f0f4";} 

}

 

[Startingup]

It worked!! And it looks great! thank you

 

[l3ta]

It worked!! And it looks great! thank you

Sweet! Next?

 

[Startingup]

<i class="fas fa-user-secret"></i>

https://wiwikau.co.uk/index.php?forums/2/

thank you !

 

[l3ta]

<i class="fas fa-user-secret"></i>

https://wiwikau.co.uk/index.php?forums/2/

thank you !

We already have an icon for node 2. It must me another number.

 

[Startingup]

Oh I'm sorry it is 532

 

[l3ta]

add this line under node number two:

.node--id532 .node-icon i::before{ content: "\f21b";}

So your code looks like this:

.block-body{

.node--id2 .node-icon i::before{ content: "\f0f4";}
.node--id532 .node-icon i::before{ content: "\f21b";}

}

Note that we will be adding each new node icon like so.

 

[Startingup]

Thank you , it looks so much better already

Please an you do the next one? It's number 491

​

<i class="fal fa-gift"></i>

 

[l3ta]

You're welcome. Add this line under node 532:

.node--id491 .node-icon i::before{ content: "\f06b";}

 

[Startingup]

<i class="fad fa-badge-percent"></i>
This one is 523,

Thank you, I have lots left, is there a way I can do them so I'm not bothering you?

 

[l3ta]

<i class="fad fa-badge-percent"></i>
This one is 523,

Thank you, I have lots left, is there a way I can do them so I'm not bothering you?

What you're going to do is basically use the same code for each node. The only things that are going to change are the node number and the icon code. Let me do a quick screenshot for the next one so you can do it yourself.

 

[l3ta]

So for the next one, you want the % icon. You go to the Fontawesome page where you icon is and you copy the code for it (see pic below):

Next, you find out which node number you want the icon in and you put it in the code:

.node--id [1?] .node-icon i::before{ content: "\ [2?]";}

Replace [1?] with your node number.

Replace [2?] with your icon code.


Your next node icon should look like this:

.node--id523 .node-icon i::before{ content: "\f646";}

Try for yourself and I will be here if anything goes wrong ;-)

 

[Startingup]

I did it! Thank you so much for your help, I really appreciate it.

 

[l3ta]

I did it! Thank you so much for your help, I really appreciate it.

You're welcome! Glad I could help.