Add icons to User Banners in Xenforo

Earlier we learned how to add custom banners for specific usergroups, now we are going to learn how to add icons to user banners. The procedure remains the same for all default or custom banners.

Let me 1st show you the output of this post

Looks cool right?

Lets start with finding the banner class div.

I am assuming that you have already created custom banners and assigned users to it.

Firstly find the banner class for which you want to add icon. We have 2 ways for it, one it by checking the app_user_banners.less template or else we can simply right-click on the banner and find it from developers mode.

For 1st method:

Go to Admin Panel>Apperance>Template> search for app_user_banners.less. Click to edit

Copy the code of the banner you want to add an icon for. For e.g “.userBanner–admin” you don’t need the rest of the code.

2nd Method is by right-clicking the banner and clicking inspect.

Now go to Admin Panel>Apperance>Template> search for extra.less. Click to edit.

The template will be empty if you haven’t done any customizations

Scroll to the end. You can add gaps between new codes.

Wondering what the above codes do? Check out Animated Usernames in Xenforo.

Now copy the below code and paste it after “}” at any line.

/* Banner icon for we are family */
.userBanner.userBanner--demo1
{
	&:before {
		 .m-faBase();
		 .m-faContent(@fa-var-hand-spock);
		 padding-right:4px
	}
}

“/* Banner icon for we are family */” is optional and is done to remember the code function for future use.

change “.userBanner–demo1” with your banner code.

Change “hand-spock” with your desired icon code. Select your icons from FontAwesome. Be sure to add @far-var- before the code, or else the icon won’t work.

I am adding icons for 3 banners namely Admin, Staff, and demo1.

Click Save.

I guess you have already added users to the new groups. If haven’t yet, follow the post to add.

For this Go to Users>List all Users Select the user you want to add to the new group. Under Secondary User Group check all the groups you want to add the user.

Click Save when done.

Now go back to the forum to check the updated users.