What's new
By:
Advanced search…

Custom node icons

Ehren

Ehren

Administrator
Staff member
Customer
Messages
5,045
Website
www.xenfocus.com
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:
Code: 
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.

So, to change the icon for the Client Lounge on this site, I would add the following to extra.less
Less: 
#XF{

    .node--id13 .node-icon i{
        &::before{
            .m-faContent(@fa-var-bell);
        }
         svg{
            display: none;
        }
    }

}



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.

Less: 
#XF .node--id13 .node-icon i::before,
#XF .node--id13 .node-icon i svg{
    display: none;
}

#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:
Less: 
#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 .node--id13 .node-icon i::before,
#XF .node--id13 .node-icon i svg,
#XF .node--id14 .node-icon i::before,
#XF .node--id14 .node-icon i svg,
#XF .node--id15 .node-icon i::before,
#XF .node--id15 .node-icon i svg
{
    display: none;
}

#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;
}
 
Last edited:
NetCat

NetCat

New Member
Customer
Messages
8
This is really cool. Is there a way to change subnode icons as well? I tried myself and ended up only being able to change all subnode icons on the page, not specific ones.
 
Ehren

Ehren

Administrator
Staff member
Customer
Messages
5,045
Website
www.xenfocus.com
NetCat said:
This is really cool. Is there a way to change subnode icons as well? I tried myself and ended up only being able to change all subnode icons on the page, not specific ones.
Click to expand...

Subnodes don't have classes so you need to target them using their URL.

Less: 
.subNodeLink[href$='subforum-2.9/']::before{
    content: "\f00d";
}

Replace the subforum-2.9 part with the end of the subforums URL. The URL for the above example is:
Code: 
https://xenfocus.com/xf2/index.php?forums/subforum-2.9/
 
sisterhood

sisterhood

Member
Customer
Messages
71
again....
how ca i change SUB forums category? Node is already
 

Attachments

  • forum2.JPG
    forum2.JPG
    23 KB · Views: 94
C

cbl-tsc

New Member
Messages
18
I have tried to use the coding indicated above to change specific node icons to a custom image and when I save it to the xtra.less template the site get severely messed up yet still doesn't show any of my custom images (that I am able to find).
I may be misunderstanding what this code is intended to do.
I have used the customization feature to set a custom icon forum wide, now I want to assign specific icons to individual forums. Specifically I am wanting to KEEP the icon that shows here before the Vendor Stores but change the icons that show by each vendor once the Vendor Stores forum is open (see next screenshot)
1519


I want each vendor to have their logo next to their forum not our default icon.
1520


To do this I used the following code in the extra.less and not only did it not accomplish what I was after it totally messed up the forum. (delete the new code and the forum returns to its former beauty)

1521
 
Nicola

Nicola

Member
Messages
41
Website
devcometrue.fr
Hello @Ehren

I put this to my extra.less template
CSS: 
/* CUSTOM NODE ICONS */
#XF {.node--id2 .node-icon i::before {content: '\f05a';}}
#XF {.node--id26 .node-icon i::before {content: '\f561';}}
#XF {.node--id103 .node-icon i::before {content: '\f2ed';}}
#XF {.node--id9 .node-icon i::before {content: '\f6ec';}}
#XF {.node--id68 .node-icon i::before {content: '\f44b';}}
#XF {.node--id70 .node-icon i::before {content: '\f206';}}
#XF {.node--id33 .node-icon i::before {content: '\f2e7';}}
#XF {.node--id29 .node-icon i::before {content: '\f5d8';}}
#XF {.node--id81 .node-icon i::before {content: '\f0f0';}}
#XF {.node--id104 .node-icon i::before {content: '\f5c4';}}
#XF {.node--id69 .node-icon i::before {content: '\f70c';}}
#XF {.node--id89 .node-icon i::before {content: '\f6fd';}}
#XF {.node--id98 .node-icon i::before {content: '\f1ea';}}
#XF {.node--id97 .node-icon i::before {content: '\f467';}}
#XF {.node--id108 .node-icon i::before {content: '\f073';}}
#XF {.node--id110 .node-icon i::before {content: '\f11e';}}
It works fine but for the nodes in grid layout the color customization (read or unread) doesn't works. They are just black.
Where is the problem ?
 
C

cbl-tsc

New Member
Messages
18
Cool. I added the {} brackets as shown above and that solved my problem. I think by Including the [data-logged-true....part of the code has made the icons responsive to new/old posts.
 
Last edited:
Ehren

Ehren

Administrator
Staff member
Customer
Messages
5,045
Website
www.xenfocus.com
@Nicola I'll look into that for the next update :)

@cbl-tsc Have you solved all of your issues or are you still needing help? I just looked at your code quickly but it all seemed okay to me.. If you're still having issues, simply send me a username and password to your ACP and I'll be happy to look into it for you :)
 
C

cbl-tsc

New Member
Messages
18
Ehren said:
@cbl-tsc Have you solved all of your issues or are you still needing help? I just looked at your code quickly but it all seemed okay to me.. If you're still having issues, simply send me a username and password to your ACP and I'll be happy to look into it for you :)
Click to expand...
I have accomplished what I was trying to do, it looks GREAT.
 
A

applelappala

New Member
Messages
1
CSS: 
#XF{
    .node--id13 .node-icon i::before{
        content: '\f17c';
    }
}
Most of the font awesome icons are not working.. For example a icon for linux, f17c is a Linux Icon from solid style fab, which doesn't work with theme. Only working icons are from solid style fas.
 
You must log in or register to reply here.
Top