Change FA Node-Icons for each Node

[invite]

https://pixelexit.com/threads/apex-light.1220/#post-5549 - Hm, i would also to know how to do this, because i dont find the Option to change the Node Icons for each Node. Are you using Font Awesome Icons here on Pixelexit.com? Your Icons are new, i also dont find it on http://fortawesome.github.io/Font-Awesome/icons/

 

[Afterward]

Yes they are fontawesome and they are available here
http://fortawesome.github.io/Font-Awesome/icons/
http://fortawesome.github.io/Font-Awesome/cheatsheet/
These are the ones pixelexit using, look in the cheatsheet for those codes and you'll see

f0a1
f059
f0e6
f028
f188
f1cd
f1de

Also i dont think you can change node icons to diff one for each node via style properties, if im not mistaken, but easily done via css.

 

[Russ]

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:

.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]

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:

.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

 

[Afterward]

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

 

[Boone]

.node_22 .nodeIcon:before
{
   content: '\f0a1';
}

 

[Russ]

@Boone can you link to your site? Or PM me the URL if you wish as well.

 

[Russ]

@Boone my apologies, try this out:

.node_22 .nodeIcon .fa:before
{
content: '\f0a1' !important;
}

See if that would do the trick for you.

 

[Boone]

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

 

[Boone]

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

 

[Russ]

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

 

[Boone]

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.

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

 

[Russ]

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

.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