• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Add Font Awesome icons to your usergroups

Add Font Awesome icons to your usergroups

#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
}