Add Font Awesome icons to your usergroups

[SyTry]

Gniouf submitted a new resource:

Add Font Awesome icons to your usergroups - Font Awesome to your usergroups

Hi,

Today I share a tutorial for version 2.0 of xenForo : add Font Awesome icons to your usergroups!

Here is the basic code to add in your EXTRA.less template :

/*add fa to your usergroups*/
.username--style3:before {
font-family: "FontAwesome";
content: "\f013";
color: inherit;
padding-right: 4px;
display: inline-block;
}

style3 is my usergroup Admin.

If you want a rotation :

.username--style3:hover:before{
display:inline-block...

Read more about this resource...

 

[DL6]

It is not necessary to put it in extra.less, the User name CSS option support less too

 

[KawaiiHannah]

It is not necessary to put it in extra.less, the User name CSS option support less too
View attachment 163045

Can you send me the code

 

[DL6]

Can you send me the code

color: #000099;
text-shadow: 0 0 0 transparent, 0 0 5px #00CCFF;
&:before {
font-family: "FontAwesome";
content: "\f013";
color: inherit;
padding-right: 4px;
display:inline-block;
}
&: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
}

 

[ErkoZZ]

Hello, I put this code and it doen't work... Someone can help me ? Please

 

[Onurhan]

Need xf 2.2 and please this make addon

 

[ChristyS]

Change the line of "font Awesome" to this -> font-family: 'Font Awesome\ 5 Pro';
And the rest of the code works fine.

 

[securedme]

If I've already have username colors configured depends on some usergroups, can I still add an icon before or after the username depending on another usergroup?

 

[CtrlV]

any update here in 2.3.3?