Custom node icons

[Ehren]

Sent Thank you!

Adding this to your extra.less file should do the trick:

.subNodeLink.subNodeLink--category::before {
    content: '\f669';
}

 

[Qui-Ran Demera]

Thank you my friend!

One additiona thing though: I tried to "fix" this linking the value to the nodes directly in extra.less... should I delete that now?

BTW: You are the best It works! Thank you

 

[Ehren]

If you want to change every icon to f669, you don't need to use the node ID's.

They should only be used if you want to target specific nodes, but leave others unaffected

 

[Xentile]

I have a set of custom node icons correctly showing up on desktop browsers but surprisingly not at all on mobile phones.

These icons associate with pages in a custom category which displayed in the header navigation bar along with "Forums", "Members", and "What's New."

@Ehren I'll send you a screenshot and a link so that you can examine the situation yourself.

 

[Ehren]

I have a set of custom node icons correctly showing up on desktop browsers but surprisingly not at all on mobile phones.

These icons associate with pages in a custom category which displayed in the header navigation bar along with "Forums", "Members", and "What's New."

@Ehren I'll send you a screenshot and a link so that you can examine the situation yourself.

The mobile navigation panel uses different code to the desktop navigation bar, so you'd need to adjust the code to create the icons on mobiles.

Since this tutorial is for node icons (rather than navigation icons), a new topic in the Modifications area would probably be ideal if you need further assistance

 

[fortnitechatter]

Custom FontAwesome Icons

To assign different FontAwesome icons to different nodes, you first need to know the id of your node, and the unicode value of your FontAwesome icon.

The node id can typically be found in the URL. On this site, the client area URL is:

https://xenfocus.com/community/forums/customer-lounge.13/

The id for this is 13, as seen at the end of that URL.

The icon which I want to use is a bell, which has a unicode value of f0f3

So, to change the icon for the Client Lounge on this site, I would add the following to extra.less

#XF{
    .node--id13 .node-icon i::before{
        content: '\f0f3';
    }
}

Using images as node icons

Instead of using FontAwesome icons, you can use images as node icons. Each node can use its own image if necessary, and a fallback image will be used for nodes which don't have their own icon. To begin, you'll first need to specify the fallback image for your node icons. This can be done under Style Properties > Node Icons > Image Path (new content). Adding a URL or path to this setting will remove the FontAwesome icons and replace them with your image.

An optional "no new content" image can be specified which will be used on nodes which have no new content. If no image is provided, a faint, grayscale version of your default image will be used.

To customize each node with its own image, add the following to extra.less and customize the 13 (make sure to edit both instances) and the url. This example will use the same node ID as the FontAwesome steps above: node 13.

#XF .node--id13 .node-icon i{
    background-image: url('https://site.com/images/node-icons/node-icon-13.png');
}

#XF[data-logged-in='true'] .node--id13.node--read .node-icon i{
    filter: @node-icon-read-filter;
    opacity: @node-icon-read-opacity;
}

To use custom node images for multiple forums, follow the pattern below:

#XF .node--id13 .node-icon i{
    background-image: url('https://site.com/images/node-icons/node-icon-13.png');
}

#XF .node--id14 .node-icon i{
    background-image: url('https://site.com/images/node-icons/node-icon-14.png');
}

#XF .node--id15 .node-icon i{
    background-image: url('https://site.com/images/node-icons/node-icon-15.png');
}

#XF[data-logged-in='true'] .node--id13.node--read .node-icon i,
#XF[data-logged-in='true'] .node--id14.node--read .node-icon i,
#XF[data-logged-in='true'] .node--id15.node--read .node-icon i{
    filter: @node-icon-read-filter;
    opacity: @node-icon-read-opacity;
}

I am attempting to add custom photos png for node categories but when I add the code supplied it doesn't update anything. Am I do something wrong?

 

[Ehren]

I am attempting to add custom photos png for node categories but when I add the code supplied it doesn't update anything. Am I do something wrong?

Hello,

If possible, can you please post your URL so I can check your code?

 

[fortnitechatter]

Hello,

If possible, can you please post your URL so I can check your code?

www.fortnitechatter.com

I removed the code because it wasn't working. I was using image URL's. Is there a specific place I need to add images, possibly in cPanel or something to use towards the coding?

 

[Ehren]

www.fortnitechatter.com

I removed the code because it wasn't working. I was using image URL's. Is there a specific place I need to add images, possibly in cPanel or something to use towards the coding?

Hello,

The icons seem to be working on your site - did you manage to get this sorted?

 

[AlteredFancy]

Hey!

How do I set page node icons for example https://poissondore.fr/pages/fiche-courte/?

Also, how can I set custom images from the media gallery like these https://poissondore.fr/media/lettre.52/?

They've also got a sort of shader layout which makes it impossible to be seen.

Here's the code Im using right now

#XF .node--id2 .node-icon i{
    background-image: url('https://poissondore.fr/data/xfmg/thumbnail/0/52-d23ece9f66b0f268067da0ed19b1db8c.jpg?1650559100');
}

#XF .node--id5 .node-icon i{
    background-image: url('https://poissondore.fr/data/xfmg/thumbnail/0/35-4c413fc66f213ff25ac8596a0dcd5493.jpg?1650559095');
}

#XF[data-logged-in='true'] .node--id2.node--read .node-icon i,
#XF[data-logged-in='true'] .node--id5.node--read .node-icon i{
    filter: @node-icon-read-filter;
    opacity: @node-icon-read-opacity;
}

 

[Ehren]

Hello,

To assign custom icons to "sub-page nodes", use this:

.subNodeLink.subNodeLink--page[href="/pages/fiche-courte/"]::before{
    content: '\f5ca';
}

That will set the Fiche Courte icon to an umbrella.

The faint/opacity effect is applied to indicate that there are no new posts in that forum. It only applies to logged in members.

It's useful, but if you want to remove it, remove this block of code:

#XF[data-logged-in='true'] .node--id2.node--read .node-icon i,
#XF[data-logged-in='true'] .node--id5.node--read .node-icon i{
    filter: @node-icon-read-filter;
    opacity: @node-icon-read-opacity;
}

 

[AlteredFancy]

Hello,

To assign custom icons to "sub-page nodes", use this:

.subNodeLink.subNodeLink--page[href="/pages/fiche-courte/"]::before{
    content: '\f5ca';
}

That will set the Fiche Courte icon to an umbrella.

The faint/opacity effect is applied to indicate that there are no new posts in that forum. It only applies to logged in members.

It's useful, but if you want to remove it, remove this block of code:

#XF[data-logged-in='true'] .node--id2.node--read .node-icon i,
#XF[data-logged-in='true'] .node--id5.node--read .node-icon i{
    filter: @node-icon-read-filter;
    opacity: @node-icon-read-opacity;
}

But what's with media images? Is there any way to currently use them as node icons? I seemingly can't manage to use the xfmgThumbnail-image class.

 

[Ehren]

They should be working fine if they're normal images..

With that said, I'd probably suggest uploading them to a dedicated area on your server (just so they aren't accidentally deleted from the media area or something).

 

[AlteredFancy]

Hey Ehren,

Since nothing has been posted on the forum about this yet, I was wondering if it was possible to replace or disable the default sub-forums fa-file-alt icon of the subNodeLink-icon.

.subNodeLink[href$='personnages-masculins.20/']::before{

    content:"";

    display:inline-block;

    margin: -6px 6px;

    width:18px;

    height:18px;

    background:url(https://contenu.poissondore.fr/img/icons/24_man.png) no-repeat;

    background-size:100%;

}

Here's my current code and I don't really know how to get rid of it besides using the code bellow which would make a huge gaping space...

.subNodeLink-icon::before{
content:"";
}

 

[Ehren]

Hi @AlteredFancy

Adding this to extra.less will change the subforum icons under node 7 to a newspaper icon (f1ea). The !important code is necessary in this case.

// Change subforum icons
.node--id7 .subNodeLink .fa-comments::before{
    content: '\f1ea' !important;
}

To remove the icons, use this instead:

// Remove subforum icons
.node--id7 .subNodeLink .fa-comments{
    display: none;
}

 

[AlteredFancy]

Hi @AlteredFancy

Adding this to extra.less will change the subforum icons under node 7 to a newspaper icon (f1ea). The !important code is necessary in this case.

// Change subforum icons
.node--id7 .subNodeLink .fa-comments::before{
    content: '\f1ea' !important;
}

To remove the icons, use this instead:

// Remove subforum icons
.node--id7 .subNodeLink .fa-comments{
    display: none;
}

// Change subforum icons
.node--id19 .subNodeLink .node--read .fa-comments{
    content: url('https://contenu.poissondore.fr/img/icons/41_pipe.png') !important;
}

It does not seem to be working if you look at https://poissondore.fr/forums/, could it be because of the XenPorta 2 add-on?

 

[Ehren]

Sorry - I should mention that you'll need to update the id's from the code so they match your own id. If you don't need to target a certain node, just remove .node--id7 from the code.

 

[AlteredFancy]

Sorry - I should mention that you'll need to update the id's from the code so they match your own id. If you don't need to target a certain node, just remove .node--id7 from the code.

I wanted my sub icon to be replaced by an image but even with the right ID, it does not seem to be of any use.

 

[Ehren]

I wanted my sub icon to be replaced by an image but even with the right ID, it does not seem to be of any use.

This will work:

.subNodeLink[href="/forums/requetes.19/"] .fa-comments{
  background-image: url('https://contenu.poissondore.fr/img/icons/41_pipe.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50%;
  font-size: 0;
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: top;
  margin-right: 5px;
}

 

[rehammer]

So I followed several suggestions but wasn't able to get the node icon to display on the forum list for subnodes.


Here's an example:

The icon appears when viewing the node, but I would like the icon to also show a mini variation on the forum list here: