XENFORO CUSTOMIZATION Animated username in Xenforo

Code Magic · Mar 3, 2025

Tired of the default usernames in XenForo? Want to create something more unique like this?

To achieve this effect, navigate to the XenForo admin panel and go to "Group and Permissions" > "User Group."

Select the user group you want to apply this effect to.

Then, under "Username CSS," copy and paste the code below.

Click “Save”.

Now go to your forum and refresh the page to see the effects.
The crown icon won't appear by default. To add it, you'll need to modify the extra.less file.

Navigate to Appearance > Templates, search for the "extra.less" template, and insert the following code.

CSS:

/* Registered Group settings Font Awesome */
.username--style2:before {
font-family: "Font Awesome 5 Pro";
content: "\f521";
color: inherit;
padding-right: 4px;
display: inline-block;
}

Note: replace .username–style2 with your style class. You can find your class name by right-clicking the username field and clicking inspect.

Replace \f521 with the Unicode of your favorite icon.

Find your favorite icon here: Font Awesome 5 Pro

As in my case its .username–style2

Click “save” when done.

Now go to your forum and refresh the page to see the effects.