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

[Skaiman]

Skaiman обновил(а) ресурс Префиксы тем с иконками новой записью:

Совместимость с XenForo 2.3 и оптимизация кода

• Совместимость с XenForo 2.3 (предыдущие версии также поддерживаются).
  • В XenForo 2.3 иконки должны быть указаны с использованием переменных @fa-var-*, например, @fa-var-exclamation-circle для fa-exclamation-circle.
    Для версий 2.0–2.2 возможно указание как кода иконки, так и переменных @fa-var-*.
• Оптимизация кода.

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

 

[sancak]

Как иконку саму выровнять? А то чет слишком высоко она

 

[Atikin]

sancak, стиль стандартный?

 

[sancak]

sancak, стиль стандартный?

XenVn Style for 2.3.4

 

[dimka1510]

sancak, можно задать высоту через top или bottom магией CSS.

 

[Atikin]

sancak,

.svgPrefix::before
{
    line-height: 1;
}

 

[sancak]

sancak,

.svgPrefix::before
{
    line-height: 1;
}

ничего не поменялось :/
возможно что-то не так делаю, вставил ниже основного кода

 

[sancak]

sancak, можно задать высоту через top или bottom магией CSS.

да вот пытался, сам префикс меняется, а иконка стоит на месте

 

[Atikin]

sancak, я проверял на вашем рабочем форуме (TSG), там все работало.

 

[sancak]

sancak, я проверял на вашем рабочем форуме (TSG), там все работало.

на моем 2.2 движок, там изначально все работало) я для игрового сервера делаю отдельный форум на 2.3, вот там не работает

 

[Atikin]

sancak, дайте ссылку на форум, чтобы посмотреть, что происходит.

 

[sancak]

sancak, дайте ссылку на форум, чтобы посмотреть, что происходит.

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

копирайта нет, знаю, не я владелец форума и не я его убирал)

 

[Atikin]

sancak,

.fsp
{
    .svgPrefix
    {
        &::before
        {
            top: .35em;
        }
    }
}

 

[sancak]

sancak,

.fsp
{
    .svgPrefix
    {
        &::before
        {
            top: .35em;
        }
    }
}

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

 

[sancak]

sancak,

.fsp
{
    .svgPrefix
    {
        &::before
        {
            top: .35em;
        }
    }
}

top: .50em - идеально ровно)

 

[Anton_Persona]

Создал префикс не отображается

 

[@soundhuge]

Создал префикс не отображается

Указали ли имя для своего префикса? Если нет, то заходите в admin.php?thread-prefixes, и указываете имя для префикса, который указали в шаблоне extra.less, например: svgLabelPrefix name

 

[Anton_Persona]

Вписал цвета, есть префиксы, иконки не отображаются.

 

[MazaHaka147]

Немного обновил код.

скрин

код

// ==================================================
// НАСТРОЙКИ
// ==================================================

@svgPrefixBorderRadius: 3px;
@svgPrefixFontSize: x-small;
@svgPrefixFontWeight: 700;
@svgPrefixIconGap: 4px;
@svgPrefixPaddingX: 6px;
@svgPrefixPaddingY: 2px;

// ==================================================
// БАЗОВЫЙ СТИЛЬ
// ==================================================

.svgPrefix,
.label.svgPrefix
{
font-size: @svgPrefixFontSize;
font-weight: @svgPrefixFontWeight;
display: inline-flex;
align-items: center;
text-transform: uppercase;
line-height: 1.2;
padding: @svgPrefixPaddingY @svgPrefixPaddingX;
margin: 0 2px 0 0;
border: 1px solid transparent;
background: transparent;
border-radius: @svgPrefixBorderRadius;
white-space: nowrap;
text-decoration: none;
box-sizing: border-box;

&:before {
margin-right: @svgPrefixIconGap;
flex-shrink: 0;
}
}

// ==================================================
// МИКСИН ДЛЯ ПРЕФИКСОВ
// ==================================================

.svgLabelPrefix(@prefix-name, @prefix-color, @prefix-icon: "none")
{
.svgPrefix.@{prefix-name},
.label.svgPrefix.@{prefix-name}
{
color: @prefix-color;
border-color: @prefix-color;

&when not (@prefix-icon = "none")
{
&:before
{
.m-faBase();
.m-faContent(@prefix-icon);
font-size: 1.1em;
}
}
}

a.svgPrefix.@{prefix-name}:hover,
a.label.svgPrefix.@{prefix-name}:hover,
a:hover .svgPrefix.@{prefix-name},
a:hover .label.svgPrefix.@{prefix-name}
{
border-color: @prefix-color;
color: @prefix-color;
}
}

// ==================================================
// Префиксы
// ==================================================

.svgLabelPrefix(vpn, #2857b8, @fa-var-plug);

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

скрины кастом