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(не реклама)

 

[Envell]

В 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;
}

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

 

[Envell]

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

Search Icons & Find the Perfect Design | Font Awesome

Search all the Version 6 icons and match your project with a look and feel that's just right. Better yet, try Font Awesome 7 with more icons, styles, and packs.

fontawesome.com

 

[Macalister_Sliv]

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

Search Icons & Find the Perfect Design | Font Awesome

Search all the Version 6 icons and match your project with a look and feel that's just right. Better yet, try Font Awesome 7 with more icons, styles, and packs.

fontawesome.com

годнинько

 

[Envell]

годнинько

Spasibo

 

[Macalister_Sliv]

Spasibo

)

 

[Macalister_Sliv]

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

Search Icons & Find the Perfect Design | Font Awesome

Search all the Version 6 icons and match your project with a look and feel that's just right. Better yet, try Font Awesome 7 with more icons, styles, and packs.

fontawesome.com

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

 

[Envell]

Спойлер

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

А если ты про сам код, то в 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;
}

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

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

 

[dima_Maratov]

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

Не получается

 

[Jack_Mithel]

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

Вы прикололись чтоль? Какое видео вам найти? Как код вставить в extra.less и затем в CSS для имени пользователей

 

[dima_Maratov]

Не работает

Вы прикололись чтоль? Какое видео вам найти? Как код вставить в extra.less и затем в CSS для имени пользователей

Покажи полный тутор

 

[Kolpak]

Не работает

Покажи полный тутор

В 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(не реклама)

 

[dima_Maratov]

Спасибо!

 

[Dimaaa]

например у меня ник красный, дракон не появляется что делать?

 

[KeoFox]

OFFTOP

https://kinogo.ec/116796-kak-priruchit-drakona.html

откуда ж знать что ты там делаешь что бы он появлялся, может код не верный, может ещё что то