XF 2.0 How do I change node icon?

Emre

Well-known member
Hi @MoonShadows ,
extra.less add:
CSS:
/* xFDestek.com Node Forum Icon Use - Start */
.node--forum.node--id1.node--read .node-icon i:before
{content: "\f0a3";
color: #colorcode or rgba code
}
/* xFDestek.com Node Forum Icon Use - End */
}

Note: Awesome icon {content: "\f0a3"; http://fontawesome.io/icons search, id1 - id2 - id3 category ID use. Color , color: #colorcode or rgba code use good work. ;)
 
Last edited:

MoonShadows

Active member
Thanks, but can you explain your "Note" in regular English. I am new to all this. I did go to http://fontawesome.io/icons. Do I put the icon code where you have "\f0a3", after that, or where?

And, does the icon code look like this? Example: <i class="fa fa-thermometer-three-quarters" aria-hidden="true"></i> for thermometer

I assume the color code is to give whatever color I want to the icon so it is not black like the samples?

And, do I change the node id to correspond with the node icon I want to change on my site?

Thanks.
 

Emre

Well-known member
icon used by xenForo http://fontawesome.io/icon/comment-o/ Unicode: fOe5

Where does this code view?
2018-01-02_08-50-31.png

xenForo icon color code: #d5eaf9 The code I gave you will be as below.
CSS:
/* xFDestek.com Node Forum Icon Use - Start */
.node--forum.node--id11.node--read .node-icon i:before {
    content: "\f0a3";
    color: #d5eaf9
}
/* xFDestek.com Node Forum Icon Use - End */
Use: forum.node--id11

After the ID, the section of the site will change.
2018-01-02_08-56-45.png

Demo:
2018-01-02_08-59-04.png

It looks nice @MoonShadows :p(y)
 

jamalfree

Active member
this actually displays both my custom icon and the FA icon. How do I get rid of the FA icon? Thanks!
try to add !important

Code:
.node--forum.node--idX.node--read .node-icon i:before {
    background-image: url("@imagePath/xenforo/XXX.png") !important;
    background-position: 0px 0px !important;
}
 

Bonsai Coder

Active member
I can't get this to work :) I have no idea what I am doing wrong.

I have this in extra.less:

Code:
/* xFDestek.com Node Forum Icon Use */
.node--forum.node--id3.node--read .node-icon i:before  {
    content: "\f0a3";
    color: #d5eaf9;
}

It should just change the color of the node icon for node 3 to a light blue, correct? Nothing changes.
 
Last edited:

Bonsai Coder

Active member
FWIW, this code DOES work for me (as a blanket replacement for all icons)

CSS:
/* Node Forum Icon Use */
.node--forum .node-icon i::before, .node--category .node-icon i::before {
content: "\f06c";
}

Seems like the part of the code that I am having trouble with is the part that specifically identifies a single forum node:

CSS:
.node--forum.node--id3.node--read

I am getting the ID from the forum node list, but nothing I do seems to work to select that single node.
 
Last edited:

danger@

Member
this seems to work:
Less:
            .node--unread &
            {
                content: url("path/topic_unread.gif") !important;
            }
        }

        .node--forum &:before,
        .node--category &:before
        {
            content: url("path/topic_read.gif");
        }
 

CJ6

Active member
Hi @MoonShadows ,
extra.less add:
CSS:
/* xFDestek.com Node Forum Icon Use - Start */
.node--forum.node--id1.node--read .node-icon i:before
{content: "\f0a3";
color: #colorcode or rgba code
}
/* xFDestek.com Node Forum Icon Use - End */
}

Note: Awesome icon {content: "\f0a3"; http://fontawesome.io/icons search, id1 - id2 - id3 category ID use. Color , color: #colorcode or rgba code use good work. ;)
I got it to work on a forum node..thanks, but how do I change the link forum node?
 
Top