Добавляем FontAwesome на баннеры!

WidNem · 11 Авг 2025

Проблема не в длине кода, а в стиле самой иконки, стилей пять, а здесь как я понял то ли regular, то ли light

West14 · 11 Авг 2025

Esil написал(а):
Здесь проблема в том, что нельзя использовать что то конкретно, solid, regular, light, duotone

о нет, разработчики глупые и ничего не предусмотрели

Less:

.m-faBase('Pro', @faWeight-light);
.m-faBase('Pro', @faWeight-regular);
.m-faBase('Pro', @faWeight-solid);

.m-faBase('Brands');

С дуотон иконками вообще отдельная история. Удобно с ними жить наверное можно только в 2.3, если использовать движковые миксины. Код ниже исключительно под 2.3.

Less:

.m-faIcon(@fa-var-duotone-comments);

Красить при этом отдельно слои тривиально не получается.
До 2.3 их лучше в целом вставлять через разметку, что для баннеров не подходит, увы.

.m-faBase() в 2.3 не нужен, он не делает ничего. При этом если делается универсальный сниппет кода под разные версии, то его нужно оставлять.

Esil написал(а):
Проблема не в длине кода

а про длину кода речи и не было, тут вопрос в его переносимости
используя движковые миксины вы получаете совместимость на три последние ветки автоматически (с поправками на разные версии FA), без необходимости делать код отдельно под 2.2 и 2.3
ещё проще - если кто-то использует ваш код на 2.2 и решить обновится на 2.3, у него не отвалятся баннеры после обноления
а это круто, на одну заботу меньше

WidNem · 12 Авг 2025

West14, Посмотрел, проверил, на 2.3 немного код отличается от 2.2, а именно:
на 2.2 код восклицательного знака (exclamation) в стиле solid таков:

CSS:

.m-faBase('Pro', @faWeight-solid);
.m-faContent(@fa-var-exclamation);

на 2.3 другой:

CSS:

.m-faContent(@fa-var-solid-exclamation);

West14 написал(а):
если кто-то использует ваш код на 2.2 и решить обновится на 2.3, у него не отвалятся баннеры после обноления

Так что, это, не совсем, код все равно придется чуть чуть менять
Но код я щас изменю

West14 · 12 Авг 2025

Esil, отвалится только солид стиль, при этом иконка останется на месте. Это всё ещё лучше чем полный отвал иконок которые были вставлены руками через шрифт. Graceful degradation :)

WidNem · 12 Авг 2025

West14, Кстати, а в 2.2 же дуотон отдельным стилем? (.m-faBase('Duotone'))

WidNem · 12 Авг 2025

Esil обновил(а) ресурс Добавляем FontAwesome на баннеры! новой записью:

Изменение кода

Весь ресурс был изменен, от и до.

Узнать больше об этом обновлении...

dimka1510 · 13 Авг 2025

Код для иконок есть, а куда его писать чтобы он выводил нужные иконки именно на баннерах - никто не сказал. Отсюда у рядового пользователя движка скорее всего возникнет куча вопросов:
1. Это всё нужно прописывать прямо в шаблон "как есть" в самый конец, дописывать к каким-то определённым классам или создавать свои?
2. Если первое, то почему "не работает, хотя дописал эти строки в конце файла, а на баннерах ничего не появилось"? И на каких баннерах вообще должны появиться иконки?
3. Если второе, то как правильно это делать и каким классам это дописывать?
4. Если третье, то как вывести свои "самодельные" баннеры с иконками вместо стандартных?
5. Не сломается ли разметка (иконка ниже/выше текста, пропал текст, квадратик вместо иконки и т.д.) баннеров при дописывании этого кода?

Как минимум два мануала по этой теме уже есть, где всё уже разжёвано:

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

anastasiya · 9 Янв 2026

Вот так сделала:
Группы и права - Группы пользователей - Текст баннера
(красненьким подставлять свое)

HTML:

<i class="far fa-route-interstate" data-xf-init="icon" style="color: white;"></i>Администратор

Mirovinger · 9 Янв 2026

Поверьте лучше через css, чем потом при случае каждую группу открывать.

anastasiya · 10 Янв 2026

Mirovinger написал(а):
Поверьте лучше через css, чем потом при случае каждую группу открывать.

Верю. Но.... все дело в том, что я не понимаю, куда этот код лепить.
Сам код - понимаю, понимаю, что в extra.less.
Но там уже есть код баннеров.
То ли его нужно интегрировать в тот, что есть (у меня не получилось, все ломается), то ли представленный здесь код вставлять отдельно.
Надо ведь для каждой группы свою иконку. Как объединить эти куски? И можно ли в настройках группы написать несколько стилей (иконка, фон, может еще какой-то эффект)?

Mirovinger · 11 Янв 2026

При желании можно, но сложные конструкции, вроде градиентов и прочего не будет нормально работать, покажите, что у Вас за код, поможем адаптировать, всё же держать всё в одном месте более практично, может даже миксин соберем.

anastasiya · 11 Янв 2026

Mirovinger написал(а):
покажите, что у Вас за код

Я пока тестирую, что мне сделать.

Вариант 1. Анимированный баннер Баннеры с анимированным градиентом
Добавить иконки так, как написано в этой теме.

Если я сюда что-то добавляю, то все ломается

CSS:

&.admin {
        background-image: linear-gradient(270deg, #ff0000, #dc00ff, #ff9400);
    }

А как в другое место добавить разные иконки для разных групп - хз.

Вариант 2. Баннер НЕ анимирован, с градиентом Баннер с градиентом
Но добавить световой эффект Баннер со световым эффектом
И иконки опять же предложенным выше способом.

--------------
Сейчас у меня стоит "Баннер с градиентом" без изменений (только цвет меняла и добавила рамочку)
Иконка добавлена тем способом, который нашла вот здесь

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

Kokiyo · 11 Янв 2026

anastasiya написал(а):
Сейчас у меня стоит "Баннер с градиентом"

Less:

.linear-gradient-prefixes(@deg, @start, @end) {
    background-image: -webkit-linear-gradient(@deg, @start, @end);
    background-image: -moz-linear-gradient(@deg, @start, @end);
    background-image: linear-gradient(90deg, @start 0%, @end 100%);
}

.linear-gradient(@_, @start, @end) {
    .linear-gradient-prefixes(left, @start, @end);
}

.gradientBanner {
    display: inline-block;
    text-align: center;
    font-size: 80%;
    color: #fff;
    text-transform: uppercase;
    padding: 3px 0;
    margin: 4px 0;
    width: 100%;
    border: none;
    &:before
    {
        .m-faBase();
        margin-right: 3px;
    }
    &.admin {
        .linear-gradient(left, #E70707, #5E0000);
        
        &:before
        {
            .m-faContent(@fa-var-yin-yang);
        }
    }
    &.moder {
        .linear-gradient(left, #029B0E, #C10000);
        
        &:before
        {
            .m-faContent(@fa-var-users);
        }
    }
    .memberHeader-banners & {
        [data-template="member_view"] & {
            width: 120px!important;
        }
    }
    .tooltip-content & {
        .tooltip--member & {
            width: 120px!important;
        }
    }
    @media (max-width: @xf-responsiveMedium) {
        display: inline!important;
        padding: 3px 5px;
    }
}

anastasiya · 11 Янв 2026

Kokiyo, спасибо, я поняла куда и как вставлять иконки.
а добавить сюда анимацию можно ?
типа "уходящего света"

Kokiyo · 11 Янв 2026

anastasiya написал(а):
Kokiyo, спасибо, я поняла куда и как вставлять иконки.
а добавить сюда анимацию можно ?
типа "уходящего света"

Less:

.linear-gradient-prefixes(@deg, @start, @end)
{
    background-image: -webkit-linear-gradient(@deg, @start, @end);
    background-image: -moz-linear-gradient(@deg, @start, @end);
    background-image: linear-gradient(90deg, @start 0%, @end 100%);
}

.linear-gradient(@_, @start, @end)
{
    .linear-gradient-prefixes(left, @start, @end);
}

@keyframes light
{
    0%
    {
        left: -80%;
    }
    100%
    {
        left: 80%;
    }
}

.gradientBanner
{
    display: inline-block;
    text-align: center;
    font-size: 80%;
    color: #fff;
    text-transform: uppercase;
    padding: 3px 0;
    margin: 4px 0;
    width: 100%;
    border: none;
    position: relative;
    overflow: hidden;
    
    &:before
    {
        .m-faBase();
        margin-right: 3px;
    }
    
    &:after
    {
        content: "";
        position: absolute;
        background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250, 250, 250, .7) 50%, transparent 70%, transparent 100%);
        background-repeat: no-repeat;
        top: 0px;
        left: -80%;
        width: 100%;
        height: 100%;
        animation: light 2.5s infinite;
    }
    
    &.admin
    {
        .linear-gradient(left, #E70707, #5E0000);
        
        &:before
        {
            .m-faContent(@fa-var-yin-yang);
        }
    }
    
    &.moder
    {
        .linear-gradient(left, #029B0E, #C10000);
        
        &:before
        {
            .m-faContent(@fa-var-users);
        }
    }
    
    .memberHeader-banners &
    {
        [data-template="member_view"] &
        {
            width: 120px!important;
        }
    }
    .tooltip-content &
    {
        .tooltip--member &
        {
            width: 120px!important;
        }
    }
    @media (max-width: @xf-responsiveMedium)
    {
        display: inline !important;
        padding: 3px 5px;
    }
}

anastasiya · 13 Янв 2026

Kokiyo, благодарю

Вот этот код из #35 сообщения работает без проблем.
Но почему , когда я вставила для staff, хоть с иконкой, хоть без нее,
баннер staff никак не изменяется ?
Вставила между анимацией и админом (цвета все тестовые)

Код:

       animation: light 10s infinite;
    }
     &.userBanner--staff {
         border-color: #720000;
        border-radius: 4px;
        .linear-gradient(left, #5c97bf, #4285b4);    
     }
    &.admin

А если добавляю
!important; как написано здесь , весь код ломается.

Mirovinger · 13 Янв 2026

А полый код, как делали просто покажите.

anastasiya · 13 Янв 2026

От версии движка как-то зависит?
Я тестирую на XF 2.1.11

У админа и модера все работает.

Код:

.linear-gradient-prefixes(@deg, @start, @end)
{
    background-image: -webkit-linear-gradient(@deg, @start, @end);
    background-image: -moz-linear-gradient(@deg, @start, @end);
    background-image: linear-gradient(90deg, @start 0%, @end 100%);
}

.linear-gradient(@_, @start, @end)
{
    .linear-gradient-prefixes(left, @start, @end);
}

@keyframes light
{
    0%
    {
        left: -80%;
    }
    100%
    {
        left: 80%;
    }
}

.gradientBanner
{
    display: inline-block;
    text-align: center;
    font-size: 50%;
    color: #fff;
  /*  text-transform: uppercase;*/
    padding: 2px 0;
    margin: 3px 0;
    width: 100%;
    /*  border: none; */
    position: relative;
    overflow: hidden;
 
    &:before
    {
        .m-faBase();
        margin-right: 3px;
    }
 
    &:after
    {
        content: "";
        position: absolute;
        background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250, 250, 250, .7) 50%, transparent 70%, transparent 100%);
        background-repeat: no-repeat;
        top: 0px;
        left: -80%;
        width: 100%;
        height: 100%;
        animation: light 10s infinite;
    }
     &.userBanner--staff {
         border-color: #720000 ;
        border-radius: 4px ;
        .linear-gradient(left, #5c97bf, #4285b4) ;    
     }
     &:before
        {
            .m-faContent(@fa-var-crown);
        }
    &.admin
    {
        border-color: #720000;
        border-radius: 4px;
        .linear-gradient(left, #E70707, #5E0000);
     
        &:before
        {
            .m-faContent(@fa-var-sun);
        }
    }
 
    &.moder
    {    border-color: #720000;
         border-radius: 4px;
        .linear-gradient(left, #2577b1, #C10000);
     
        &:before
        {
            .m-faContent(@fa-var-shield-alt);
        }
    }
 
    .memberHeader-banners &
    {
        [data-template="member_view"] &
        {
            width: 120px!important;
        }
    }
    .tooltip-content &
    {
        .tooltip--member &
        {
            width: 120px!important;
        }
    }
    @media (max-width: @xf-responsiveMedium)
    {
        display: inline !important;
        padding: 3px 5px;
    }
}

Добавляем FontAwesome на баннеры!

WidNem

West14

meow

WidNem

West14

meow

WidNem

WidNem

dimka1510

anastasiya

Mirovinger

anastasiya

Mirovinger

anastasiya

Kokiyo

anastasiya

Kokiyo

anastasiya

Mirovinger

anastasiya

Похожие темы

Мы ценим вашу конфиденциальность