XF 2.1 / 2.2 / 2.3 Add a FA icon in front of your nickname

In your extra.less template add these codes:

.username--style3:before {
font-family: "FontAwesome";
content: "\f013";
color: inherit;
padding-right: 4px;
display: inline-block;
}

Change the style number to the group number of your choice.

To rotate it add these codes:

.username--style3:hover:before{
display:inline-block;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition:all 0.8s;
-webkit-transition:all 0.8s;
-moz-transition:all 0.8s;
-ms-transition:all 0.8s;
-o-transition:all 0.8s
}

Same thing change the style number.

For XF 2.1 / 2.2 version:

.username--style3:before {
    font-family: "Font Awesome 5 Pro";
    content: "\f501";
    padding-right: 4px;
    display: inline-block;
}

Pour la version XF 2.3

.username--style3
{
    &:before
    {
        .m-faBase();
        .m-faContent(@fa-var-link);
        padding-right: 3px;
    }
}