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

[nsnsmkshs]

Как сделать так, чтобы перед ником был смайлик

 

[Jack_Mithel]

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

В 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; Результат...

pawno-help.ru

 

[Сахарок]

Есть легче способ,скачать плагин XFA-CustomUsernameIcons-5.1.1

 

[Сахарок]

Есть легче способ,скачать плагин XFA-CustomUsernameIcons-5.1.1

Но он будет без заднего фона

 

[Nikita_FullMaster]

С анимацией:

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

Без анимации:

.username--style1:before {
    font-family: "Font Awesome 5 Pro";
    content: "\f521";
font-weight: 600;
    padding-right: 1px;
    display: inline-block;
}

 

[Сахарок]

С анимацией:

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

Без анимации:

.username--style1:before {
    font-family: "Font Awesome 5 Pro";
    content: "\f521";
font-weight: 600;
    padding-right: 1px;
    display: inline-block;
}

\f521 заменить на \f4fb.Для вашего "смайлика" астронавта