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

Добро пожаловать!

Зарегистрировавшись у нас, вы сможете обсуждать, делиться и отправлять личные сообщения другим участникам нашего сообщества.

Зарегистрироваться!
  • Если Вы желаете помогать развитию проекта, готовы заполнять раздел(-ы) и подсказывать другим пользователям на портале, есть возможность попасть в команду редакторов. Для этого следует обратиться в техническую поддержку
Активный
Регистрация
14 Апр 2024
Сообщения
822

В extra.less

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

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

CSS:
margin-right: 5px;

Результат

2025-01-07_03-08-50.png

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

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

Результат

2025-01-07_03-09-26.png

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

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

content: "\f118 - где f118 юникод иконки, который вы можете увидеть на сайте fontawesome.com(не реклама)
 
Последнее редактирование:
Профессионал
Регистрация
26 Окт 2024
Сообщения
1,161

В extra.less

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

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

CSS:
margin-right: 5px;

Результат

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

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

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

Результат

Посмотреть вложение 4151
Так же можно сделать вот так.
Less:
.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;
}
Будет переворачиваться)
 
Последнее редактирование:
Пользователь
Регистрация
1 Май 2024
Сообщения
68
Пользователь
Регистрация
1 Май 2024
Сообщения
68
Профессионал
Регистрация
26 Окт 2024
Сообщения
1,161
Screenshot_20250216-201235.pngScreenshot_20250216-201258.jpgScreenshot_20250216-201314.jpg
Потом этот код сюда
Screenshot_20250216-201337.jpg


А если ты про сам код, то в Extra.less
 
\
Заблокированный
Регистрация
2 Ноя 2024
Сообщения
2,007
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
годный ресурс
 
Пользователь
Регистрация
12 Дек 2024
Сообщения
25
Так же можно сделать вот так.
Less:
.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 узнать
 
Пользователь
Регистрация
1 Май 2024
Сообщения
68
Так же можно сделать вот так.
Less:
.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;
}
Будет переворачиваться)
бро найди пж видео
 
Сверху