XF 2.2 Change Link Node Icon in CSS?

CTS

Active member
I wish to change the Link node icon based on forum id using css.

I can do it for forum nodes, but I am struggling to get any css to change the link node icon.

Anyone have a suggestion?

This is an example of the code used and it works for forum nodes, but not link nodes.

CSS:
/*****node icon fontawesome changer per FORUM node*****/

.node.node--id37.node--forum.node--read .node-icon i:before {
    .m-faBase();
    .m-faContent("\f07c");
}
.node.node--id37.node--forum.node--unread .node-icon i:before {
    .m-faBase();
    .m-faContent("\f07c");
    font-weight: 900;
}

/**********/
 
Last edited:
Solution
.node--forum is the problem.

Try this to be more generic (links/articles/suggestions)


Code:
.node.node--id37 .node-icon i:before { .m-faContent("\f07c"); }

Also, your existing CSS can be simplified.

Code:
/*****node icon fontawesome changer per FORUM node*****/

.node.node--id37.node--forum.node--read .node-icon i:before {
    .m-faContent("\f07c");
}
.node.node--id37.node--forum.node--unread .node-icon i:before {
    font-weight: 900;
}

/**********/

You don't need to define the faBase since the icon is already there. You also don't need to define the same icon for unread status, you can just do the font-weight.
.node--forum is the problem.

Try this to be more generic (links/articles/suggestions)


Code:
.node.node--id37 .node-icon i:before { .m-faContent("\f07c"); }

Also, your existing CSS can be simplified.

Code:
/*****node icon fontawesome changer per FORUM node*****/

.node.node--id37.node--forum.node--read .node-icon i:before {
    .m-faContent("\f07c");
}
.node.node--id37.node--forum.node--unread .node-icon i:before {
    font-weight: 900;
}

/**********/

You don't need to define the faBase since the icon is already there. You also don't need to define the same icon for unread status, you can just do the font-weight.
 
  • Like
Reactions: CTS
Solution
Top Bottom