FA Иконка перед ником

[Aleksandr]

В extra.less​

.username--style3:before {
    content: "\f118";
    font-family: "Font Awesome 5 Pro";
    margin-right: 5px;
}

В CSS имени пользователя​

margin-right: 5px;

Результат​

Можно сделать сплошной, добавив font-weight: bold;

margin-right: 5px;
font-weight: bold;

Результат​

Дополнительно​

username--style3 - где 3, ID группы пользователей

content: "\f118 - где f118 юникод иконки, который вы можете увидеть на сайте fontawesome.com(не реклама)

 

[Sample Text]

В extra.less​

.username--style3:before {
    content: "\f118";
    font-family: "Font Awesome 5 Pro";
    margin-right: 5px;
}

В CSS имени пользователя​

margin-right: 5px;

Результат​

Посмотреть вложение 4150

Можно сделать сплошной, добавив font-weight: bold;

margin-right: 5px;
font-weight: bold;

Результат​

Посмотреть вложение 4151

Так же можно сделать вот так.

.username--style1:before {
    font-family: "Font Awesome 5 Pro";
    content: "\f521";
font-weight: 600;
    padding-right: 1px;
    display: inline-block;
}
.username--style1: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 0.8s;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -o-transition: all 0.8s;
}

Будет переворачиваться)

 

[Sample Text]

Иконки вы можете выбирать тут.

Search Icons & Find the Perfect Design | Font Awesome

Search all the icons and match your project with a look and feel that's just right. And make sure to check out the all-new Sharp Solid Icons.

fontawesome.com

 

[Macalister_Sliv]

Иконки вы можете выбирать тут.

Search Icons & Find the Perfect Design | Font Awesome

Search all the icons and match your project with a look and feel that's just right. And make sure to check out the all-new Sharp Solid Icons.

fontawesome.com

годнинько

 

[Sample Text]

годнинько

Spasibo 🫠

 

[Macalister_Sliv]

Spasibo 🫠

)

 

[Macalister_Sliv]

Иконки вы можете выбирать тут.

Search Icons & Find the Perfect Design | Font Awesome

Search all the icons and match your project with a look and feel that's just right. And make sure to check out the all-new Sharp Solid Icons.

fontawesome.com

а куда их в код вставлять

 

[Sample Text]

Спойлер

Потом этот код сюда

А если ты про сам код, то в Extra.less

 

[Macalister_Sliv]

Спойлер

Посмотреть вложение 5088Посмотреть вложение 5089Посмотреть вложение 5090
Потом этот код сюда
Посмотреть вложение 5091

А если ты про сам код, то в Extra.less

сяб

 

[damitz]

годный ресурс

 

[Dev Fage]

Так же можно сделать вот так.

.username--style1:before {
    font-family: "Font Awesome 5 Pro";
    content: "\f521";
font-weight: 600;
    padding-right: 1px;
    display: inline-block;
}
.username--style1: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 0.8s;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -o-transition: all 0.8s;
}

Будет переворачиваться)

А где ID узнать

 

[Aleksandr]

А где ID узнать

По ссылке на группу пользователей. В конце ссылки будет число, которое определяет ID группы пользователей

 

[Macalister_Sliv]

Так же можно сделать вот так.

.username--style1:before {
    font-family: "Font Awesome 5 Pro";
    content: "\f521";
font-weight: 600;
    padding-right: 1px;
    display: inline-block;
}
.username--style1: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 0.8s;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -o-transition: all 0.8s;
}

Будет переворачиваться)

бро найди пж видео