Гайд Добавление Font Awesome иконок в баннеры групп в xenForo

[wlux.net]

Чтобы добавить иконку перед текстом в пользовательском баннере (.userBanner), нужно внести правки в extra.less.
Базовый шаблон:

.userBanner {
    strong:before {
        .m-faBase(); // Базовая настройка FA
        margin-right: 3px; // Отступ справа от иконки
    }

Примеры с иконкой user-circle (можно заменить на любую):

    &.userBanner--staff      { strong { .m-faBefore(@fa-var-user-circle); } }
    &.userBanner--primary    { strong { .m-faBefore(@fa-var-user-circle); } }
    &.userBanner--accent     { strong { .m-faBefore(@fa-var-user-circle); } }
    &.userBanner--red        { strong { .m-faBefore(@fa-var-user-circle); } }
    &.userBanner--green      { strong { .m-faBefore(@fa-var-user-circle); } }
    &.userBanner--olive      { strong { .m-faBefore(@fa-var-user-circle); } }
    &.userBanner--lightGreen { strong { .m-faBefore(@fa-var-user-circle); } }
    &.userBanner--blue       { strong { .m-faBefore(@fa-var-user-circle); } }
    &.userBanner--royalBlue  { strong { .m-faBefore(@fa-var-user-circle); } }
    &.userBanner--skyBlue    { strong { .m-faBefore(@fa-var-user-circle); } }
    &.userBanner--gray       { strong { .m-faBefore(@fa-var-user-circle); } }
    &.userBanner--silver     { strong { .m-faBefore(@fa-var-user-circle); } }
    &.userBanner--yellow     { strong { .m-faBefore(@fa-var-user-circle); } }
    &.userBanner--orange     { strong { .m-faBefore(@fa-var-user-circle); } }
}

Советы:​

• Иконку @fa-var-user-circle можно заменить на любую другую из официального каталога Font Awesome 5.
• Используйте только название переменной — например, @fa-var-shield-alt для щита.

 

[jakarta777]

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

You must be logged in to see the message.