Add Font Awesome icons to your usergroups

Add Font Awesome icons to your usergroups

SyTry

Well-known member
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 :
Code:
/*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 :
Code:
.username--style3:hover:before{
display:inline-block...

Read more about this resource...
 
It is not necessary to put it in extra.less, the User name CSS option support less too :)
1512187371949.webp
ampBuRS.gif
 
Can you send me the code :p
Less:
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
}
 
Change the line of "font Awesome" to this -> font-family: 'Font Awesome\ 5 Pro';
And the rest of the code works fine.
 
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?
 
Top Bottom