0%
OneHub

Tutorial Add Animated Icons Before Usernames

New threads Top posters New members General forum statistics

    • Thread
      Forum
      Messages
      View
      Date
      By
      Last reply
  • Loading…
  • Loading…

  • Forum statistics

    Threads
    228
    Messages
    286
    Members
    11
    Latest member
    PuNkReAS
    Member time online
    1d 7h 42m
82 0 1
OneHub

OneHub

SUPER ADMIN
Joined
Sep 3, 2025
Messages
267
Reaction score
17
5 MONTHS
5 MONTHS OF SERVICE
1759568125583.webp

In the extra.less template, copy the following code

CSS: 
.username--style3:before {
    content: "";
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    width: 1.28571429em;
    mask: url('/styles/fa/regular/user-crown.svg?v=5.15.3') no-repeat center;
    -webkit-mask: url('/styles/fa/regular/user-crown.svg?v=5.15.3') no-repeat center;
    padding-right: 1px;
    display: inline-block
}

.username--style3:before {
    font-family: "Font Awesome 5 Pro";
    .m-faContent(@fa-var-duotone-user-crown);
    padding-right: 1px;
    display: inline-block
}

.username--style3:hover:before {
    display: inline-block;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transition: all .8s;
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -ms-transition: all .8s;
    -o-transition: all .8s
}
.username--style4:before {
    content: "";
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    width: 1.28571429em;
    mask: url('/styles/fa/regular/user-crown.svg?v=5.15.3') no-repeat center;
    -webkit-mask: url('/styles/fa/regular/user-crown.svg?v=5.15.3') no-repeat center;
    padding-right: 1px;
    display: inline-block
}

.username--style4:before {
    font-family: "Font Awesome 5 Pro";
    .m-faContent(@fa-var-duotone-user-check);
    padding-right: 1px;
    display: inline-block
}

.username--style4:hover:before {
    display: inline-block;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transition: all .8s;
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -ms-transition: all .8s;
    -o-transition: all .8s
}
.username--style21:before {
    content: "";
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    width: 1.28571429em;
    mask: url('/styles/fa/regular/user-crown.svg?v=5.15.3') no-repeat center;
    -webkit-mask: url('/styles/fa/regular/user-crown.svg?v=5.15.3') no-repeat center;
    padding-right: 1px;
    display: inline-block
}

.username--style21:before {
    font-family: "Font Awesome 5 Pro";
    .m-faContent(@fa-var-duotone-user-check);
    padding-right: 1px;
    display: inline-block
}

.username--style7:hover:before {
    display: inline-block;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transition: all .8s;
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -ms-transition: all .8s;
    -o-transition: all .8s
}
.username--style2:before {
    content: "";
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    width: 1.28571429em;
    mask: url('/styles/fa/regular/user-crown.svg?v=5.15.3') no-repeat center;
    -webkit-mask: url('/styles/fa/regular/user-crown.svg?v=5.15.3') no-repeat center;
    padding-right: 1px;
    display: inline-block
}

.username--style2:before {
    font-family: "Font Awesome 5 Pro";
    .m-faContent(@fa-var-duotone-dove);
    padding-right: 1px;
    display: inline-block
}

.username--style2:hover:before {
    display: inline-block;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transition: all .8s;
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -ms-transition: all .8s;
    -o-transition: all .8s
}
.username--style11:before {
    content: "";
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    width: 1.28571429em;
    mask: url('/styles/fa/regular/user-crown.svg?v=5.15.3') no-repeat center;
    -webkit-mask: url('/styles/fa/regular/user-crown.svg?v=5.15.3') no-repeat center;
    padding-right: 1px;
    display: inline-block
}

.username--style11:before {
    font-family: "Font Awesome 5 Pro";
    .m-faContent(@fa-var-duotone-dove);
    padding-right: 1px;
    display: inline-block
}

.username--style11:hover:before {
    display: inline-block;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transition: all .8s;
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -ms-transition: all .8s;
    -o-transition: all .8s
}
.username--style12:before {
    content: "";
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    width: 1.28571429em;
    mask: url('/styles/fa/regular/user-crown.svg?v=5.15.3') no-repeat center;
    -webkit-mask: url('/styles/fa/regular/user-crown.svg?v=5.15.3') no-repeat center;
    padding-right: 1px;
    display: inline-block
}

.username--style12:before {
    font-family: "Font Awesome 5 Pro";
    .m-faContent(@fa-var-duotone-user-cowboy);
    padding-right: 1px;
    display: inline-block
}

.username--style12:hover:before {
    display: inline-block;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transition: all .8s;
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -ms-transition: all .8s;
    -o-transition: all .8s
}
.username--style5:before {
    content: "";
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    width: 1.28571429em;
    mask: url('/styles/fa/regular/user-crown.svg?v=5.15.3') no-repeat center;
    -webkit-mask: url('/styles/fa/regular/user-crown.svg?v=5.15.3') no-repeat center;
    padding-right: 1px;
    display: inline-block
}

.username--style5:before {
    font-family: "Font Awesome 5 Pro";
    .m-faContent(@fa-var-duotone-user-check);
    padding-right: 1px;
    display: inline-block
}

.username--style5:hover:before {
    display: inline-block;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transition: all .8s;
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -ms-transition: all .8s;
    -o-transition: all .8s
}
.username--style9:before {
    content: "";
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    width: 1.28571429em;
    mask: url('/styles/fa/regular/user-crown.svg?v=5.15.3') no-repeat center;
    -webkit-mask: url('/styles/fa/regular/user-crown.svg?v=5.15.3') no-repeat center;
    padding-right: 1px;
    display: inline-block
}

.username--style7:before {
    font-family: "Font Awesome 5 Pro";
    .m-faContent(@fa-var-duotone-user-check);
    padding-right: 1px;
    display: inline-block
}

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

In the CSS username format, copy the code you want or you can modify the colors

CSS: 
Admin:
text-shadow: #ee82ee 1px 1px 10px;
color: red;
font-weight: bold;


moderator:
color: #0000FF;
font-weight: bold;


User:
color: #9999FF;
font-weight: bold;



VIP_Group:
color: #4F805A;
font-weight: bold;
 
  • Like
Reactions: te1
Fireworks code in the forum

Fireworks code in the forum

Previous Thread
How to Block Disposable Emails in XenForo 2.3

How to Block Disposable Emails in XenForo 2.3

Next Thread
You must log in or register to reply here.

Trending content

Back
Top Bottom