How To Create Custom User Group Icons for XenForo

FateKid

𝒯𝐻𝐸 𝒪𝒯𝐻𝐸𝑅 𝒮𝐼𝒟𝐸
ADMINISTRATOR
ELITE DONOR
‍WEB LIFETIME
‍MC LIFETIME
20K MEMBERS
10K MEMBERS
VERIFIED
Nulled Level
7
 
Messages
8,070
Reactions
57,725
Awards
33
Tokens
214,598¢
Hello everyone,
Since many users have reached out to try and receive explanations of various customizations around our community, I've deciced to write up a quick tutorial on how to enable custom user group icons in front of your group names.

This modification is pretty simple since there is no need for custom-template syntax (JS/jQuery) to achieve these results.


1. Finding Your Group IDs​

The first thing you need to do is check which IDs are specific for your user groups. You can do this by viewing the user group from your AdminCP.
The group ID will be displayed within the address bar when you click to edit the user group, like so:

8dce2e0d465f111076b793a536b7308a.png


My Administration group ID is equal to 3
Once you've found your user group IDs, write them down and continue on with the tutorial.

2. Creating & Enabling Custom CSS​

Each group ID will need specific styling in order to achieve placing the custom icon in front of the username.
If you have multiple groups, the icon of the group with the highest priority will be displayed

CSS:
/* ====== CUSTOM USERNAME ICONS ====== */
.username--style1::before { /* Unregistered icon */
    background: url(https://google.com/ThisIsAnExampleImage.png);
    width: 20px;
    height: 20px;
    content: "";
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    display: inline-block;
    margin-right: 1px;
}
.username--style2::before { /* Member icon */
    background: url();
    width: 20px;
    height: 20px;
    content: "";
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    display: inline-block;
    margin-right: 1px;
}
.username--style3::before { /* Administration icon */
    background: url();
    width: 20px;
    height: 20px;
    content: "";
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    display: inline-block;
    margin-right: 1px;
}
/* ====== END CUSTOM USERNAME ICONS ====== */

The image/gif content you'd like to show should be inputted as a URL within the background: url(); key for each styling property.
Example: background: url(https://google.com/ThisIsAnExampleImage.png);