💥 Префиксы тем и ресурсов с FontAwesome 🔥

hacker · 24 Октябрь 2022

hacker разместил(а) новый ресурс:

Префиксы тем и ресурсов с FontAwesome - Префиксы тем и ресурсов с иконками/значками FontAwesome

Less:
Модификация шаблона: extra.less
Ключ модификации: rt_bla_bla_bla
Описание: Префиксы тем и ресурсов
Тип поиска: Регулярное выражение
Найти: #^.*$#su
Заменить:

Less:

$0 /***************************************************************************** Префиксы тем и ресурсов */ .label { border-radius: 0px; display: inline-block; position: relative; font-size: 80%; cursor: pointer; min-width...

Посмотреть страницу этого ресурса...

Glower · 18 Январь 2023

Что то у меня иконки не показывают

hacker · 18 Январь 2023

@Fi4a, Не знаю, проблем небыло.

baltun · 18 Январь 2023

Fi4a сказал(а):
Что то у меня иконки не показывают

Иконки FA версии 5 должны быть, вот только не помню только бесплатные или и платные входят.

hacker · 18 Январь 2023

@Fi4a, Вы нгаверное от 6 версии иконки ставите ? Обратите внимание.

У вас нет разрешения на просмотр ссылки, пожалуйста Вход или Регистрация

Kamasytra · 20 Март 2025

Кто подскажет, у ская вот такая модификация была, но на 2.3 иконки не показывают а тупо белый квадрат. Так и не могу одуплить как сделать что бы иконки в 2.3 работали тоже.
Вообще чет перестал последнее время думать

baltun · 20 Март 2025

Может это вам поможет https://web-zones.ru/threads/kak-podkljuchat-ikonki-fontawesome-v-xenforo-2-3.5606/ там в 2.3 по другому они выводятся и поэтому их переписывать нужно в шаблонах

Kamasytra · 20 Март 2025

baltun сказал(а):
Может это вам поможет https://web-zones.ru/threads/kak-podkljuchat-ikonki-fontawesome-v-xenforo-2-3.5606/ там в 2.3 по другому они выводятся и поэтому их переписывать нужно в шаблонах

чет пытался пытался.

Код:

@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;
        font-size: 70%;
        font-weight: 500;
        display: inline-flex;
        text-align: center;
        align-items: center;
        text-transform: uppercase;
        line-height: ((@xf-lineHeightDefault) * .9);
        padding: .25em .5em;
        border: none;
        border-radius: @svgPrefixBorderRadius;
        position: relative;
        white-space: nowrap;
        .fsp & {
            margin-right: 5px;
        }
        .menuPrefix& {
            display: inline-block;
            font-size: 1.3em;
            width: 100%;
            padding: .333em;
            a& {
                text-decoration: none;
            }
        }
        .p-title-value & {
            .p-title & {
                font-size: 70%;
            }
        }
        &:before {
            position: absolute;
            top: .25em;
            bottom: 0;
            left: .333em;
        }   
        &.@{prefix-name} {
            background: linear-gradient(135deg, @svgPrefixColorGradient 0%, @svgPrefixColorGradient 40%, transparent 40%, transparent 100%), @prefix-color;
            color: rgb(250,250,250);
            text-shadow: 1px 0 1px @svgPrefixTextShadow, 0 1px 1px @svgPrefixTextShadow, -1px 0 1px @svgPrefixTextShadow, 0 -1px 1px @svgPrefixTextShadow;
            &when (iskeyword(@prefix-icon)) {
                padding: .25em .5em .25em 1.75em;
                &:before {
                    .m-faBase();
                    content: "\@{prefix-icon}";
                }
            }
        }   
    }
}

hacker · 21 Март 2025

Less:

@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;
        font-size: 70%;
        font-weight: 500;
        display: inline-flex;
        text-align: center;
        align-items: center;
        text-transform: uppercase;
        line-height: ((@xf-lineHeightDefault) * .9);
        padding: .25em .5em;
        border: none;
        border-radius: @svgPrefixBorderRadius;
        position: relative;
        white-space: nowrap;
        .fsp & {
            margin-right: 5px;
        }
        .menuPrefix& {
            display: inline-block;
            font-size: 1.3em;
            width: 100%;
            padding: .333em;
            a& {
                text-decoration: none;
            }
        }
        .p-title-value & {
            .p-title & {
                font-size: 70%;
            }
        }
        &:before {
        .m-faBase();
            position: absolute;
            top: .25em;
            bottom: 0;
            left: .333em;
        }
    }
        &.@{prefix-name} {
            background: linear-gradient(135deg, @svgPrefixColorGradient 0%, @svgPrefixColorGradient 40%, transparent 40%, transparent 100%), @prefix-color;
            color: rgb(250,250,250);
            text-shadow: 1px 0 1px @svgPrefixTextShadow, 0 1px 1px @svgPrefixTextShadow, -1px 0 1px @svgPrefixTextShadow, 0 -1px 1px @svgPrefixTextShadow;
            &when (iskeyword(@prefix-icon)) {
                padding: .25em .5em .25em 1.75em;
                &:before {
                    .m-faBase();
                    content: "\@{prefix-icon}";
                }
            }
        }   
    }
}

Kamasytra · 21 Март 2025

hacker сказал(а):

Less:

@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;
        font-size: 70%;
        font-weight: 500;
        display: inline-flex;
        text-align: center;
        align-items: center;
        text-transform: uppercase;
        line-height: ((@xf-lineHeightDefault) * .9);
        padding: .25em .5em;
        border: none;
        border-radius: @svgPrefixBorderRadius;
        position: relative;
        white-space: nowrap;
        .fsp & {
            margin-right: 5px;
        }
        .menuPrefix& {
            display: inline-block;
            font-size: 1.3em;
            width: 100%;
            padding: .333em;
            a& {
                text-decoration: none;
            }
        }
        .p-title-value & {
            .p-title & {
                font-size: 70%;
            }
        }
        &:before {
        .m-faBase();
            position: absolute;
            top: .25em;
            bottom: 0;
            left: .333em;
        }
    }
        &.@{prefix-name} {
            background: linear-gradient(135deg, @svgPrefixColorGradient 0%, @svgPrefixColorGradient 40%, transparent 40%, transparent 100%), @prefix-color;
            color: rgb(250,250,250);
            text-shadow: 1px 0 1px @svgPrefixTextShadow, 0 1px 1px @svgPrefixTextShadow, -1px 0 1px @svgPrefixTextShadow, 0 -1px 1px @svgPrefixTextShadow;
            &when (iskeyword(@prefix-icon)) {
                padding: .25em .5em .25em 1.75em;
                &:before {
                    .m-faBase();
                    content: "\@{prefix-icon}";
                }
            }
        }  
    }
}

ломает стиль

hacker · 21 Март 2025

Kamasytra сказал(а):
ломает стиль

Фигурную закрывающую скобку видимо не в то место поставил.

Код:

@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;
        font-size: 70%;
        font-weight: 500;
        display: inline-flex;
        text-align: center;
        align-items: center;
        text-transform: uppercase;
        line-height: ((@xf-lineHeightDefault) * .9);
        padding: .25em .5em;
        border: none;
        border-radius: @svgPrefixBorderRadius;
        position: relative;
        white-space: nowrap;
        .fsp & {
            margin-right: 5px;
        }
        .menuPrefix& {
            display: inline-block;
            font-size: 1.3em;
            width: 100%;
            padding: .333em;
            a& {
                text-decoration: none;
            }
        }
        .p-title-value & {
            .p-title & {
                font-size: 70%;
            }
        }
        &:before {
        .m-faBase();
            position: absolute;
            top: .25em;
            bottom: 0;
            left: .333em;
        }
        &.@{prefix-name} {
            background: linear-gradient(135deg, @svgPrefixColorGradient 0%, @svgPrefixColorGradient 40%, transparent 40%, transparent 100%), @prefix-color;
            color: rgb(250,250,250);
            text-shadow: 1px 0 1px @svgPrefixTextShadow, 0 1px 1px @svgPrefixTextShadow, -1px 0 1px @svgPrefixTextShadow, 0 -1px 1px @svgPrefixTextShadow;
            &when (iskeyword(@prefix-icon)) {
                padding: .25em .5em .25em 1.75em;
                &:before {
                    .m-faBase();
                    content: "\@{prefix-icon}";
                }
            }
        }   
    }
}

Пробуйте. Скобка лишняя была.

Kamasytra · 21 Март 2025

hacker сказал(а):

Фигурную закрывающую скобку видимо не в то место поставил.

Код:

@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;
        font-size: 70%;
        font-weight: 500;
        display: inline-flex;
        text-align: center;
        align-items: center;
        text-transform: uppercase;
        line-height: ((@xf-lineHeightDefault) * .9);
        padding: .25em .5em;
        border: none;
        border-radius: @svgPrefixBorderRadius;
        position: relative;
        white-space: nowrap;
        .fsp & {
            margin-right: 5px;
        }
        .menuPrefix& {
            display: inline-block;
            font-size: 1.3em;
            width: 100%;
            padding: .333em;
            a& {
                text-decoration: none;
            }
        }
        .p-title-value & {
            .p-title & {
                font-size: 70%;
            }
        }
        &:before {
        .m-faBase();
            position: absolute;
            top: .25em;
            bottom: 0;
            left: .333em;
        }
        &.@{prefix-name} {
            background: linear-gradient(135deg, @svgPrefixColorGradient 0%, @svgPrefixColorGradient 40%, transparent 40%, transparent 100%), @prefix-color;
            color: rgb(250,250,250);
            text-shadow: 1px 0 1px @svgPrefixTextShadow, 0 1px 1px @svgPrefixTextShadow, -1px 0 1px @svgPrefixTextShadow, 0 -1px 1px @svgPrefixTextShadow;
            &when (iskeyword(@prefix-icon)) {
                padding: .25em .5em .25em 1.75em;
                &:before {
                    .m-faBase();
                    content: "\@{prefix-icon}";
                }
            }
        }  
    }
}

Пробуйте. Скобка лишняя была.

Четко, но иконка белый квадрат и все

hacker · 21 Март 2025

Less:

.labelTextShadow(@shadow: 0 0 0, @color: transparent) {
    text-shadow: @shadow @color;
    
}

.label {
    display: inline-block;
    border-radius: 1px solid transparent;
    font-size: 80%;
    line-height: 1.26;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;

    .structItem-title & {
        font-weight: 500;
    }
 
    &:before {
           .m-faBase();
            padding-right: 5px;
        }
 
    &.label--hidden {
        font-size: 85%;
    }
 
    &.label--red {
        .m-labelVariation(rgb(231,76,60), transparent, transparent);
        .labelTextShadow();
    }

    &.label--green {
        .m-labelVariation(rgb(22,160,133), transparent, transparent);
        .labelTextShadow();
    }

    &.label--olive {
        .m-labelVariation(rgb(39,174,96), transparent, transparent);
        .labelTextShadow();
    }

    &.label--lightGreen {
        .m-labelVariation(rgb(46,204,113), transparent, transparent);
        .labelTextShadow();
    }

    &.label--blue {
        .m-labelVariation(rgb(41,128,185), transparent, transparent);        .labelTextShadow();
    }

    &.label--royalBlue {
        .m-labelVariation(rgb(52,152,219), transparent, transparent);
        .labelTextShadow();
    }

    &.label--skyBlue {
        .m-labelVariation(rgb(142,68,173), transparent, transparent);
        .labelTextShadow();
    }

    &.label--gray {
        .m-labelVariation(rgb(127,140,141), transparent, transparent);
        .labelTextShadow();
    }

    &.label--silver {
        .m-labelVariation(rgb(189,195,199), transparent, transparent);
        .labelTextShadow();
    }

    &.label--yellow {
        .m-labelVariation(rgb(241,196,15), transparent, transparent);
        .labelTextShadow();
    }

    &.label--orange {
        .m-labelVariation(rgb(230,126,34), transparent, transparent);
        .labelTextShadow();
    }

    &.label--primary {
        .m-labelVariation(rgb(37,119,177), transparent, transparent);
        .labelTextShadow();
    }

    &.label--accent {
        .m-labelVariation(rgb(170,103,9), transparent, transparent);
        .labelTextShadow();
    }
}

Код:

/************************************************ Веселые префиксы */
.xenforo_web {
    display: inline-block;
    color: #f21868;
    border-radius: 0px;
    position: relative;
    font-size: 85%;
    padding: 0 5px 0 32px;
    cursor: pointer;
    font-weight: normal;
    vertical-align: middle;
    text-align: center;
    text-transform: uppercase;
    min-width: 100px;
    line-height: 20px;
    &:before {
        background-color: #fff;
        position: absolute;
        border-top-right-radius: 40px;
        border-right: 5px solid rgb(240, 24, 104);
        top: 0;
        bottom: 0;
        left: 0;
        min-width: 20px;
        padding: 2px 4px 0 10px;
        width: 20px;
        justify-content: center;
        display: flex;   
        font-size: 85%;
        text-align: center;
        align-items: center;
    }
}

.store {
    background-color: #b3b3b3;
}
.store:before {
    content: "";
    color: gold;
    .m-faContent(@fa-var-star);   
}

.store:before:hover {
  display:inline-block;
  -webkit-animation-name: flash;
  animation-name: flash;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes flash {
  0%, 50%, 100% {
  opacity: 1;
  }

  25%, 75% {
  opacity: 0;
  }
}
.xenforo_web:hover {
    color: blue;
    font-weight: bold;
    text-shadow: 0 0 5px #f05, 0 0 5px #f05;
}
.xenforo_web:hover {
    display:inline-block;
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes rubberBand {
  0% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  30% {
  -webkit-transform: scale3d(1.25, 0.75, 1);
  transform: scale3d(1.25, 0.75, 1);
  }
  40% {
  -webkit-transform: scale3d(0.75, 1.25, 1);
  transform: scale3d(0.75, 1.25, 1);
  }
  50% {
  -webkit-transform: scale3d(1.15, 0.85, 1);
  transform: scale3d(1.15, 0.85, 1);
  }
  65% {
  -webkit-transform: scale3d(.95, 1.05, 1);
  transform: scale3d(.95, 1.05, 1);
  }
  75% {
  -webkit-transform: scale3d(1.05, .95, 1);
  transform: scale3d(1.05, .95, 1);
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  }
  @keyframes rubberBand {
  0% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  30% {
  -webkit-transform: scale3d(1.25, 0.75, 1);
  transform: scale3d(1.25, 0.75, 1);
  }
  40% {
  -webkit-transform: scale3d(0.75, 1.25, 1);
  transform: scale3d(0.75, 1.25, 1);
  }
  50% {
  -webkit-transform: scale3d(1.15, 0.85, 1);
  transform: scale3d(1.15, 0.85, 1);
  }
  65% {
  -webkit-transform: scale3d(.95, 1.05, 1);
  transform: scale3d(.95, 1.05, 1);
  }
  75% {
  -webkit-transform: scale3d(1.05, .95, 1);
  transform: scale3d(1.05, .95, 1);
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
}
.store:before {
      -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes rubberBand {
  0% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  30% {
  -webkit-transform: scale3d(1.25, 0.75, 1);
  transform: scale3d(1.25, 0.75, 1);
  }
  40% {
  -webkit-transform: scale3d(0.75, 1.25, 1);
  transform: scale3d(0.75, 1.25, 1);
  }
  50% {
  -webkit-transform: scale3d(1.15, 0.85, 1);
  transform: scale3d(1.15, 0.85, 1);
  }
  65% {
  -webkit-transform: scale3d(.95, 1.05, 1);
  transform: scale3d(.95, 1.05, 1);
  }
  75% {
  -webkit-transform: scale3d(1.05, .95, 1);
  transform: scale3d(1.05, .95, 1);
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  }
  @keyframes rubberBand {
  0% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  30% {
  -webkit-transform: scale3d(1.25, 0.75, 1);
  transform: scale3d(1.25, 0.75, 1);
  }
  40% {
  -webkit-transform: scale3d(0.75, 1.25, 1);
  transform: scale3d(0.75, 1.25, 1);
  }
  50% {
  -webkit-transform: scale3d(1.15, 0.85, 1);
  transform: scale3d(1.15, 0.85, 1);
  }
  65% {
  -webkit-transform: scale3d(.95, 1.05, 1);
  transform: scale3d(.95, 1.05, 1);
  }
  75% {
  -webkit-transform: scale3d(1.05, .95, 1);
  transform: scale3d(1.05, .95, 1);
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
}

.xenforo_web {
    -webkit-transform-origin-x: 90%;
-ms-transform-origin-y: 35%;
transform-origin-z: initial;
-webkit-animation-name: swing;
animation-name: swing;
-webkit-animation-duration: 2.5s;
animation-duration: 2.5s;
animation-iteration-count: infinite;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}
100% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}
@keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}
100% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}
/*******************************************************************/

Балуйтесь и тестируйте