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

годнинько

 

[Sample Text]

годнинько

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

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

 

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

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

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

 

[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

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