Add Font Awesome icons to your usergroups

Add Font Awesome icons to your usergroups

SyTry

Active member
#1
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...
 

DL6

Well-known member
#4
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
}
 
Top