Префиксы тем с иконками

XenForo Префиксы тем с иконками

Обзор Обсуждения
Skaiman

Skaiman

Легенда

Репутация:

Регистрация
20.01.25
Сообщения
50
Реакции
4
Volshebnik разместил(а) новый ресурс:

Префиксы тем с иконками - Префиксы тем с возможностью добавления Font Awesome

Добавляем в extra.less, лучше модификацией
Less:
Expand Collapse Copy 
@svgPrefixBorderRadius: @xf-borderRadiusSmall; // Радиус префиксов
@svgPrefixFontFamily: inherit;                 // Семейство шрифта префикса
@svgPrefixColorGradient: rgba(0,0,0,.4);       // Цвет градиента прификса
@svgPrefixTextShadow: rgba(0,0,0,.5);          // Цвет тени префикса

.svgLabelPrefix(@prefix-name, @prefix-color, @prefix-icon: "none") {
    .svgPrefix, .label.svgPrefix {
        font-family: @svgPrefixFontFamily...
Нажмите, чтобы раскрыть...

Посмотреть страницу этого ресурса...
 
  • Меценат
  • Администратор
  • Модератор
  • Персонал форума
  • #2
Для версии движка 2.3, код:
Less:
Expand Collapse Copy 
.svg-labelVariation(@label-color, @label-bg) {
    background: linear-gradient(135deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.3) 40%, transparent 40%, transparent 100%),
                @label-bg;
    color: @label-color;
}

.label {
    display: inline-block;
    padding: 2px .35em;
    border: none;
    border-radius: 5px;
    font-size: 60%;
    text-transform: uppercase;
    font-weight: 700;
    min-width: 65px;
    position: relative;
      top: -2px;
    &:before {
        margin-right: 3px;
    }
    &.label--important {
        .svg-labelVariation(#fff, #D32F2F);
        .m-faBefore(@fa-var-exclamation-circle);
    }
}
В примере создан префикс important, выделен в коде. По аналогии ниже добавляем нужные префиксы, если указать:
Less:
Expand Collapse Copy 
    &.label--prefix {
        .svg-labelVariation(#fff, #0D47A1);
    }
то префикс будет без иконки с названием prefix, с фоном #0D47A1 и цветом текста #fff, если указать так:
Less:
Expand Collapse Copy 
    &.label--prefix {
        .svg-labelVariation(#fff, #0D47A1);
        .m-faBefore(@fa-var-info-circle);
    }
то добавляется иконка Font Awesome с названием info-circle, иконки ЗДЕСЬ, дополнительно можно добавлять стиль иконок, solid, regular, light, duotone
Less:
Expand Collapse Copy 
.m-faBefore(@fa-var-solid-info-circle);
.m-faBefore(@fa-var-regular-info-circle);
.m-faBefore(@fa-var-light-info-circle);
.m-faBefore(@fa-var-duotone-info-circle);
2024-03-31_085252.png
 
Для ответа нужно войти/зарегистрироваться
Назад
Верх Низ