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

[KayUser]

Доброго времени суток. Интересует вопрос, что я сделал возможно не так. Требуется то, чтобы перед ником была иконка короны ( f521 | crown ). Выдается от группы. Пример ниже. Также вот наш extra.less:

//banners
.userBanner.my-style
{
color: black;
background-color: #87CEEB;
}

.userBanner.sozd
{
color: black;
background-color: #1899FF;
}

.userBanner.forum
{
color: black;
background-color: #FFD700;
background-shadow: white 0px 0px 8px;
}

/* === SCROLLBAR === */

@scrollbarBG: @xf-chromeTextColor; // Фон скролбара. Использованна переменная xenforo, можно заменить на цвет в любом формате (hex, rgb, hsl) или transparent - прозрачный.
@thumbBG: @xf-chromeBg; // Цвет скролбара. Использованна переменная xenforo, можно заменить на цвет в любом формате (hex, rgb, hsl).
@scrollbarWD: @xf-paddingMedium; // Ширина скролбара. Использованна переменная xenforo, можно заменить на свой размер в px, но для браузеров Mozilla ширина не изменится.
@thumbBR: @xf-borderRadiusLarge; // Радиус скролбара. Использованна переменная xenforo, можно заменить на свой размер в px.

* {
    scrollbar-width: thin;
    scrollbar-color: @thumbBG @scrollbarBG;
}
::-webkit-scrollbar {
    width: @scrollbarWD;
}
::-webkit-scrollbar-track {
    background: @scrollbarBG;
}
::-webkit-scrollbar-thumb {
    background: #131526;
    border-radius: @thumbBR;
}

.username-style-id(95; @f521) {
    .username {
        &--style95 {
            &:before {
                content: "\f521";
            }
        }
    }
}
.username {
    & :before {
        .m-faBase(); padding-right: 4px;
    }
}

.username--style36-.username--moderator::before {
font-family: 'Font Awesome 5 Pro';
font-size: inherit;
font-style: normal;
font-weight: 400;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: '\f521';
color: inherit;
padding-right: 4px;
display: inline-block;
color: #ffd700;
text-shadow: 0px 0px 20px #ffd700;
}
.crown {
font-size: inherit;
font-style: normal;
font-weight: 400;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: inherit;
[CENTER]padding-right: 4px;[/CENTER]
display: inline-block;
color: #ffd700;
text-shadow: 0px 0px 20px #ffd700;
}

​

Может кто поможет с кодом?)

 

[IlyaPep]

Доброго времени суток. Интересует вопрос, что я сделал возможно не так. Требуется то, чтобы перед ником была иконка короны ( f521 | crown ). Выдается от группы. Пример ниже. Также вот наш extra.less:

//banners
.userBanner.my-style
{
color: black;
background-color: #87CEEB;
}

.userBanner.sozd
{
color: black;
background-color: #1899FF;
}

.userBanner.forum
{
color: black;
background-color: #FFD700;
background-shadow: white 0px 0px 8px;
}

/* === SCROLLBAR === */

@scrollbarBG: @xf-chromeTextColor; // Фон скролбара. Использованна переменная xenforo, можно заменить на цвет в любом формате (hex, rgb, hsl) или transparent - прозрачный.
@thumbBG: @xf-chromeBg; // Цвет скролбара. Использованна переменная xenforo, можно заменить на цвет в любом формате (hex, rgb, hsl).
@scrollbarWD: @xf-paddingMedium; // Ширина скролбара. Использованна переменная xenforo, можно заменить на свой размер в px, но для браузеров Mozilla ширина не изменится.
@thumbBR: @xf-borderRadiusLarge; // Радиус скролбара. Использованна переменная xenforo, можно заменить на свой размер в px.

* {
    scrollbar-width: thin;
    scrollbar-color: @thumbBG @scrollbarBG;
}
::-webkit-scrollbar {
    width: @scrollbarWD;
}
::-webkit-scrollbar-track {
    background: @scrollbarBG;
}
::-webkit-scrollbar-thumb {
    background: #131526;
    border-radius: @thumbBR;
}

.username-style-id(95; @f521) {
    .username {
        &--style95 {
            &:before {
                content: "\f521";
            }
        }
    }
}
.username {
    & :before {
        .m-faBase(); padding-right: 4px;
    }
}

.username--style36-.username--moderator::before {
font-family: 'Font Awesome 5 Pro';
font-size: inherit;
font-style: normal;
font-weight: 400;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: '\f521';
color: inherit;
padding-right: 4px;
display: inline-block;
color: #ffd700;
text-shadow: 0px 0px 20px #ffd700;
}
.crown {
font-size: inherit;
font-style: normal;
font-weight: 400;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: inherit;
[CENTER]padding-right: 4px;[/CENTER]
display: inline-block;
color: #ffd700;
text-shadow: 0px 0px 20px #ffd700;
}

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

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 

[KayUser]

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

Не совсем то я бы сказал, иконка. Нужно перед ником поставить иконку fontawesome.

 

[IlyaPep]

Не совсем то я бы сказал, иконка. Нужно перед ником поставить иконку fontawesome.

Ну пропустите шаг с подключением своего шрифта, просто указывайте fontawesome ?‍

 

[Skaiman]

.username {
    &[data-user-id="1"] {
        span:before {
            .m-faBase();
            .m-faContent(@fa-var-crown);
            margin-right: 5px;
        }
    }
}

или так

.usernameBeforeIcon (@userid, @faicon) {
    .username {
        &[data-user-id="@{userid}"] {
            span:before {
                .m-faBase();
                content: "\@{faicon}";
                margin-right: 5px;
            }
        }
    }
}

.usernameBeforeIcon (1, f521);

 

[KayUser]

.username {
    &[data-user-id="1"] {
        span:before {
            .m-faBase();
            .m-faContent(@fa-var-crown);
            margin-right: 5px;
        }
    }
}

А если для группы?

 

[Skaiman]

вместо span класс группы .username--style8

.username {
       .username--style8:before {
            .m-faBase();
            .m-faContent(@fa-var-crown);
            margin-right: 5px;
        }
}

или так

.groupBeforeIcon (@groupid, @faicon) {
    .username {
       .username--style@{groupid}:before {
            .m-faBase();
            content: "\@{faicon}";
            margin-right: 5px;
        }
    }
}

.groupBeforeIcon (3, f521);

 

[KayUser]

или так

.usernameBeforeIcon (@userid, @faicon) {
    .username {
        &[data-user-id="@{userid}"] {
            span:before {
                .m-faBase();
                content: "\@{faicon}";
                margin-right: 5px;
            }
        }
    }
}

.usernameBeforeIcon (1, f521);

Появился отступ, иконки нет :(

//banners
.userBanner.my-style
{
color: black;
background-color: #87CEEB;
}

.userBanner.sozd
{
color: black;
background-color: #1899FF;
}
/* === SCROLLBAR === */

@scrollbarBG: @xf-chromeTextColor; // Фон скролбара. Использованна переменная xenforo, можно заменить на цвет в любом формате (hex, rgb, hsl) или transparent - прозрачный.
@thumbBG: @xf-chromeBg; // Цвет скролбара. Использованна переменная xenforo, можно заменить на цвет в любом формате (hex, rgb, hsl).
@scrollbarWD: @xf-paddingMedium; // Ширина скролбара. Использованна переменная xenforo, можно заменить на свой размер в px, но для браузеров Mozilla ширина не изменится.
@thumbBR: @xf-borderRadiusLarge; // Радиус скролбара. Использованна переменная xenforo, можно заменить на свой размер в px.

* {
    scrollbar-width: thin;
    scrollbar-color: @thumbBG @scrollbarBG;
}
::-webkit-scrollbar {
    width: @scrollbarWD;
}
::-webkit-scrollbar-track {
    background: @scrollbarBG;
}
::-webkit-scrollbar-thumb {
    background: #131526;
    border-radius: @thumbBR;
}

.usernameBeforeIcon (@userid, @faicon) {
    .username {
        &[data-user-id="@{userid}"] {
            span:before {
                .m-faBase();
                content: "\@{faicon}";
                margin-right: 5px;
            }
        }
    }
}

.usernameBeforeIcon (15902, f521);
}

 

[Skaiman]

Зачем скобка после .usernameBeforeIcon (15902, f521); я не указывал

 

[KayUser]

Зачем скобка после .usernameBeforeIcon (15902, f521); я не указывал

/* === SCROLLBAR === */

@scrollbarBG: @xf-chromeTextColor; // Фон скролбара. Использованна переменная xenforo, можно заменить на цвет в любом формате (hex, rgb, hsl) или transparent - прозрачный.
@thumbBG: @xf-chromeBg; // Цвет скролбара. Использованна переменная xenforo, можно заменить на цвет в любом формате (hex, rgb, hsl).
@scrollbarWD: @xf-paddingMedium; // Ширина скролбара. Использованна переменная xenforo, можно заменить на свой размер в px, но для браузеров Mozilla ширина не изменится.
@thumbBR: @xf-borderRadiusLarge; // Радиус скролбара. Использованна переменная xenforo, можно заменить на свой размер в px.

* {
    scrollbar-width: thin;
    scrollbar-color: @thumbBG @scrollbarBG;
}
::-webkit-scrollbar {
    width: @scrollbarWD;
}
::-webkit-scrollbar-track {
    background: @scrollbarBG;
}
::-webkit-scrollbar-thumb {
    background: #131526;
    border-radius: @thumbBR;
}

.groupBeforeIcon (@groupid, @faicon) {
    .username {
       .username--style@{groupid}:before {
            .m-faBase();
            content: "\@{faicon}";
            margin-right: 5px;
        }
    }
}

.groupBeforeIcon (95, f521);

Такая же проблема. Отступ появился лишь, иконки нет.

 

[Skaiman]

акая же проблема. Отступ появился лишь, иконки нет.

Так то я проверил прежде чем дать, у меня в обоих случаях появилась, могу по месту глянуть

.groupBeforeIcon (95, f521);

у тебя 95 групп?

 

[KayUser]

у тебя 95 групп?

/admin.php?user-groups/premium.95/edit

 

[IlyaPep]

А стиль вдруг не от th?

/admin.php?user-groups/premium.95/edit

 

[Skaiman]

А стиль вдруг не от th?

там вроде тот же код для ника, щас гляну

Я знаю почему, у него не везде раскрашены ники

 

[KayUser]

.username {
       .username--style8:before {
            .m-faBase();
            .m-faContent(@fa-var-crown);
            margin-right: 5px;
        }
}

Это для группы?

 

[Skaiman]

Это для группы?

да, я говорю, было бы лучше по месту посмотреть

 

[KayUser]

Это работает.

.username {
    &[data-user-id="1"] {
        span:before {
            .m-faBase();
            .m-faContent(@fa-var-crown);
            margin-right: 5px;
        }
    }
}

Вот это - нет.

или так

.usernameBeforeIcon (@userid, @faicon) {
    .username {
        &[data-user-id="@{userid}"] {
            span:before {
                .m-faBase();
                content: "\@{faicon}";
                margin-right: 5px;
            }
        }
    }
}

.usernameBeforeIcon (1, f521);

 

[Skaiman]

не то

стиль UI.X, код для пользователя

 

[KayUser]

Можно Ваш полный extra less?

IO dark стиль.

 

[Skaiman]

Можно Ваш полный extra less?

Зачем это тебе? :) Лан я на пальцах не буду объяснять, или даешь ссылку на сайт, посмотреть что там у тебя или разбирайся сам