XF 1.x Change FA Node-Icons for each Node

Russ

Pixel Exit Staff
Also to add to a specific node, once you have the font awesome node icons enabled,you need to grab the node id and adjust accordingly:

Code:
.node_2 .nodeIcon:before
{
   content: '\f0a1';
}
.node_77 .nodeIcon:before
{
   content: '\f188';
}
Replacing the node_# obviously with your node number, and the f### alpha/numeric code with one from the cheat sheet you want.

You may need to use an !important at the end of each one.
 

Boone

Well-Known Member
Also to add to a specific node, once you have the font awesome node icons enabled,you need to grab the node id and adjust accordingly:

Code:
.node_2 .nodeIcon:before
{
   content: '\f0a1';
}
.node_77 .nodeIcon:before
{
   content: '\f188';
}
Replacing the node_# obviously with your node number, and the f### alpha/numeric code with one from the cheat sheet you want.

You may need to use an !important at the end of each one.
Added the code to extra.css

Is that correct? Here's what I got
 

Attachments

Afterward

Customer
node_2 when 2 is your node id.
Can you post here what you added exactly? and do you have fontawesome node icon enabled?
 

Russ

Pixel Exit Staff
@Boone my apologies, try this out:

Code:
.node_22 .nodeIcon .fa:before
{
content: '\f0a1' !important;
}
See if that would do the trick for you.
 

Boone

Well-Known Member
Thank you Russ that worked. Now it's dimmed. Will the node icon have color when new posts arrive or is that another step?
 

Russ

Pixel Exit Staff
Check out [XB] Font Awesome -> Left side (Node Icon: Forum (Read*)) and set the color there.
 

Boone

Well-Known Member
I tried this to make the node icon a bit bigger but it didn't work. It just rendered the "fa-2x" alongside the icon.

Code:
.node_22 .nodeIcon .fa:before
{
content: '\f0a1 fa-2x' !important;
}
 

Russ

Pixel Exit Staff
ya that shouldn't work. If you need to target a specific icon just apply a font-size to it:

Code:
.node_22 .nodeIcon .fa:before
{
content: '\f0a1' !important;
font-size: 20px;
}
If you want to apply it to all icons, consider increasing the size here:
[XB] Font Awesome -> Font Awesome Icon Size to fa-3x
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.