Node Icons

Node icons are the icons next to the forum titles on the main forum page. XenBase adds the option to have Font Awesome icons load there instead of images allowing for easier customization.

This page will guide you on how to change the node icons and also apply custom icons on a per node basis.

All of your edits will go inside your child style

Node Icons

You'll find all controls for the node icons in: Style Properties -> Node Icons. Here you can:

  • Enable Font Awesome Node Icons
  • Change all of the FA node icons easily by replacing the code from the full list of supported FA icons found here.
  • Turn forum icons into "Mark as read" links, this will mark that specific forum as fully read.
  • Styling for the image and FA node icons

Custom Font Awesome Icons per Node

Placing custom Font Awesome icons on a per node basis is really easy and makes your forum look really nice!
Once the Font Awesome icons are enabled you need to find your node ID's next.
You can find the node ID easily by going to Applications -> Node Tree, click on the node you want a custom icon for and look for the # in the URL. This # is your node ID.

Next open the template: extra.css and paste this into it:

.node_# .nodeIcon .fa:before { content: '\f0e6'; }

Replace the # with your node ID number and the f0e6 is a custom icon which you can find the full list of codes here.

That's it, you can add as many as you want. If you grab the ID of a category it will trickle down to all of the nodes inside that category.

Custom Image Node Icons

First you need to find the ID of the node you want to change the icon on.

You can find the node ID easily by going to Applications -> Node Tree, click on the node you want a custom icon for and look for the # in the URL. This # is your node ID.

Next open the template: extra.css and paste this into it:

.node.node_# .forumNodeInfo .nodeIcon, .node.node_# .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-read-#.png");
    background-position: 0px 0px;
}
.node.node_# .forumNodeInfo.unread .nodeIcon, .node.node_# .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-unread-#.png");
    background-position: 0px 0px;
}

Replace the # with your node ID number and that's it, you can add as many as you want.

Check out our other documentation on XenBase features, they can be found in the sidebar!

For further support please start a new thread here. If you want to obtain help via a support ticket just submit a ticket.

Let's work together on your next project

Contact us today to talk about how we can help you