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

Afterward

Customer

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

  • Screen shot 2014-09-27 at 5.06.10 PM.png
    Screen shot 2014-09-27 at 5.06.10 PM.png
    7.8 KB · Views: 17

Boone

Well-Known Member
Sorry didn't make the edit time in time. It's very dim. Probably coincides with the Apex theme.
 

Attachments

  • Screen shot 2014-09-27 at 8.19.36 PM.png
    Screen shot 2014-09-27 at 8.19.36 PM.png
    7.6 KB · Views: 16

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.