Support Username with flipping icon

[chibik]

Anyone know how they make the flipping icon when you move your mouse to the username like here, i know they using the font awesome for the icon but when you move your mouse to the username it flips 360 or rotates rather. Anyone can point me to a right direction please? Thank you
https://***.net/attachments/capture-png.26831/

 

[</clown>]

.username--style2:before {
    font-family: "Font Awesome 5 Pro";
    content: "\f0f3";
    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;
}

 

[ngbaze]

.username--style2:before {
    font-family: "Font Awesome 5 Pro";
    content: "\f0f3";
    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;
}

where should I add the CSS codes?

 

[</clown>]

where should I add the CSS codes?

paste extra.less, replace the number 2 with your group ID