XF 2.x different node fa-icon

maszd

cXF BRONZE
cXF Donor
Messages
112
Likes
43
#1
Hi @BassMan
on xF 2.0 to change all node icon iam use this code :
Code:
.node--forum .node-icon i:before {
    text-shadow: 1px 1px 0;
    content: "\f0f4";
}
my question is, how to change only for specific node?
thank you before.
Regards.
 

TheXboxCloud

cXF GOLD
cXF SILVER
cXF BRONZE
Messages
3
Likes
3
#3
Code:
.node--category .node-icon i::before, .node--forum .node-icon i::before {
text-shadow: 1px 1px 0;
content: '\f0f4';
}
I think that's the code for all of them at once. Try and see if it works. I think it should as it showed the URL of my node icons in that specific selector rather then the one you used.

If you want to target a specific node ID try something like this and replace the area that's the node ID with the desired node.

Code:
.node--id33 .node--category .node-icon i::before, .node--id33 .node--forum .node-icon i::before {
text-shadow: 1px 1px 0;
content: '\f0f4';
}
I'll let BassMan correct this if I'm wrong. Just trying to help. I haven't tested any of it but it seems that relatively speaking it should work. The second code is simply targeting the node id '33' with the appropriate selector for changing node icons. You'll need to replace the node ID after using inspect element to find out which one you should use.

I'd give it a shot. At least the first one should work.

@maszd I updated the post. I don't know if the second one would work you'd have to play around with it. But it might.

EDIT: I also updated it a third time just now. I realize since there's a comma the node ID should be in both places.
 
Last edited:

TheXboxCloud

cXF GOLD
cXF SILVER
cXF BRONZE
Messages
3
Likes
3
#4
To add to this it's required you add the font awesome property in the code as I just tried a while ago for our category icon and it wouldn't work without it.

So add this to the code above:

Code:
font-family: 'FontAwesome', sans-serif;
Also be aware that there is no space between "Font" and "Awesome". There can't be a space between it. Thanks.
 

TheXboxCloud

cXF GOLD
cXF SILVER
cXF BRONZE
Messages
3
Likes
3
#9
Hi @BassMan
iam try that code but not working :(
This is the one I used on my forum when I was using it. Should work.

CSS:
.node--id52.node--read .node-icon i:before {
    font-family: FontAwesome;
    content: '\f023';
}

.node--id52 .node-icon i:before {
    font-family: FontAwesome;
    content: '\f023';
}
Not sure if my previous above example ever worked but this is what I went with on my old forum and it worked like a charm. Replace "52" with the node ID and the unicode with the appropriate icon.

Works with subforums too.

If the unread indicator for the second part needs an adjustment add .node--unread in the same format as the first.

@maszd
 

maszd

cXF BRONZE
cXF Donor
Messages
112
Likes
43
#10
This is the one I used on my forum when I was using it. Should work.

CSS:
.node--id52.node--read .node-icon i:before {
    font-family: FontAwesome;
    content: '\f023';
}

.node--id52 .node-icon i:before {
    font-family: FontAwesome;
    content: '\f023';
}
Not sure if my previous above example ever worked but this is what I went with on my old forum and it worked like a charm. Replace "52" with the node ID and the unicode with the appropriate icon.

Works with subforums too.

If the unread indicator for the second part needs an adjustment add .node--unread in the same format as the first.

@maszd
working perfect :heart: thank you @TheXboxCloud :)
 

maszd

cXF BRONZE
cXF Donor
Messages
112
Likes
43
#12
Hi again :D
now iam change this option to show sub node icon on forum list:

2018-05-12_142418.png

iam try this code but not working, icon not changged:

HTML:
.node.node--id40 .subNodeLink.subNodeLink--forum:before {
    content: "\f187";
}
thank you before.
 

You must log in or register to reply here.

Forgot your password?
Don't have an account? Register now

Welcome to customizeXF

We are running default XenForo style customized by cXF
Registration is free!

Similar threads

Top