XF 2.0 How do I change node icon?

[MoonShadows]

How do I change the default node icon? Can I have a different one for each node? If so, how? Thanks.

 

[Emre]

Hi @MoonShadows ,
extra.less add:

/* 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.

 

[MoonShadows]

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]

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

Where does this code view?


xenForo icon color code: #d5eaf9 The code I gave you will be as below.

/* 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.


Demo:


It looks nice @MoonShadows

 

[MoonShadows]

@Emre
Got it! Thanks.

 

[MoonShadows]

Now, if I wanted to use my own icons, could I do this?

.node--forum.node--idX.node--read .node-icon i:before
{content: "/images/XXXX.png";
}

 

[Emre]

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

 

[MoonShadows]

Thanks again, @Emre. I appreciate your help.

 

[danger@]

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

this actually displays both my custom icon and the FA icon. How do I get rid of the FA icon? Thanks!

 

[Frode789]

this actually displays both my custom icon and the FA icon. How do I get rid of the FA icon? Thanks!

I have the same problem. It displays both. Any help?

 

[jamalfree]

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

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

 

[Frode789]

try to add !important

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

Didn't work :\

 

[Bonsai Coder]

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

I have this in extra.less:

/* 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.

 

[Matt777]

doesn't work for me either

 

[Bonsai Coder]

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

/* 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:

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

 

[danger@]

try to add !important

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

doesn't work

 

[danger@]

this seems to work:

            .node--unread &
            {
                content: url("path/topic_unread.gif") !important;
            }
        }

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

 

[Emre]

node icon for node 3 to a light blue, correct?

color: #d5eaf9;

Blue code;

color: blue;

or

color: #0000ff;

or

color: rgb(0, 0, 255);

More color code #color or RGBAcolor https://www.w3schools.com/colors/colors_picker.asp

 

[CJ6]

Hi @MoonShadows ,
extra.less add:

/* 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?

 

[Emre]

@CJ6 , No does not work