XF 2.2 Не отображаются иконки в виджете

[bingo-maen]

Здравствуйте, вроде делаю всё правильно, но не отображаются иконки

 

[Виталий Васильевич]

Доброй ночи.
Какие иконки? в меню или еще где ?
Это в тему Стиля

 

[bingo-maen]

Доброй ночи.
Какие иконки? в меню или еще где ?
Это в тему Стиля

Стандартный стиль, изменённый. Я про меню:

Должно быть:

 

[KROT]

Если вы про данные иконки виджета ,тогда у вас не корректно введен код

Стандартный стиль, изменённый. Я про меню:
Посмотреть вложение 138481

 

[Mirovinger]

Стандартный стиль, изменённый. Я про меню:
Посмотреть вложение 138481
Должно быть:
Посмотреть вложение 138483

Код весь покажите, ну есть вероятность, что не подключили иконки.

 

[bingo-maen]

Код весь покажите, ну есть вероятность, что не подключили иконки.

<div class="block" data-widget-id="11" data-widget-key="xfi_sidebar_social_block_widget" data-widget-definition="xfi_social_block_widget">
    <div class="block-container">
        <h3 class="block-minorHeader">Мы в социальных сетях</h3>
        <div class="block-body block-row">
            <center>
                <ul class="soc soc-icons">
                    <li><a class="soc-vkontakte" data-xf-init="tooltip" href="https://vk.com/rp_evolve" target="_blank" data-original-title="Вконтакте" id="js-XFUniqueId30"></a></li>
                    <li><a class="soc-youtube" data-xf-init="tooltip" href="https://www.youtube.com/channel/UCcRPjUKQPImCaemAoJTx0-Q" target="_blank" data-original-title="Youtube" id="js-XFUniqueId31"></a></li>
                    <li><a class="soc-telegram" data-xf-init="tooltip" href="https://t.me/evolverpnews" target="_blank" data-original-title="Telegram" id="js-XFUniqueId33"></a></li>
                    <li><a class="soc-discord" data-xf-init="tooltip" href="https://vk.cc/c6Qgt4" target="_blank" data-original-title="Discord" id="js-XFUniqueId34"></a></li>
                </ul>
            </center>
        </div>
    </div>
</div>

.soc li a {
    font-family: si !important;
    font-style: normal;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    display: block;
    position: relative;
    z-index: 1;
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: calc(((60px) / 2) + ((60px) / 10 / 2));
    border-radius: 10px;
    margin-right: 9px;
    color: #ffffff;
    background-color: none;
}
.soc {
    padding-top: 5px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 10px;
    list-style: none;
    margin: 0;
    overflow: hidden;
}
.soc li {
    display: inline-block;
    *display: inline;
    zoom: 1;
}
.soc-vkontakte {
    background-color: #5a7fa6;
}
.soc-vkontakte:before {
    content: '\e095';
}
.soc-youtube {
    background-color: #e02a20;
}
.soc-youtube:before {
    content: '\e0a5';
}
.soc-telegram {
    background-color: #0088cc;
}
.soc-telegram:before {
    content: '\e087';
}
.soc-discord {
    background-color: #7289da;
}
.soc-discord:before {
    content: '\e01d';
}

 

[Skaiman]

font-family: si !important;

шрифт то этот есть?

там скорее по месту смотреть надо, стиль вероятно UI.X, для стиледрочеров :)

 

[Skaiman]

Код виджета HTML, в расширенном режиме:

<div class="block soc-widget" {{ widget_data($widget) }}>
    <div class="block-container">
        <div class="block-body block-row">
            <ul class="soc-icons">
                <li><a class="soc-vkontakte" data-xf-init="tooltip" href="#" target="_blank" title="Вконтакте"></a></li>
                <li><a class="soc-youtube" data-xf-init="tooltip" href="#" target="_blank" title="Youtube"></a></li>
                <li><a class="soc-telegram" data-xf-init="tooltip" href="#" target="_blank" title="Telegram"></a></li>
                <li><a class="soc-discord" data-xf-init="tooltip" href="#" target="_blank" title="Discord"></a></li>
            </ul>
        </div>
    </div>
</div>

Код для шаблона extra.less:

.block.soc-widget {
    .soc-icons {
            padding: 5px 0 0 10px;
            list-style: none;
            margin: 0;
            overflow: hidden;
            text-align: center;
        li {
            display: inline-block;           
            a {
                .m-faBase(Brands);
                box-sizing: border-box;
                overflow: hidden;
                text-decoration: none;
                text-align: center;
                display: block;
                position: relative;
                z-index: 1;
                width: 60px;
                height: 60px;
                line-height: 60px;
                font-size: calc(((60px) / 2) + ((60px) / 10 / 2));
                border-radius: 10px;
                margin-right: 9px;
                color: #ffffff;
                background-color: none;
                &.soc-vkontakte {
                    background-color: #5a7fa6;
                    .m-faBefore(@fa-var-vk);
                }
                &.soc-youtube {
                    background-color: #e02a20;
                    .m-faBefore(@fa-var-youtube);
                }
                &.soc-telegram {
                    background-color: #0088cc;
                    .m-faBefore(@fa-var-telegram-plane);
                }
                &.soc-discord {
                    background-color: #7289da;
                    .m-faBefore(@fa-var-discord);
                }                       
            }
        }
    }
}

Получим:

 

[Mirovinger]

Забавно, когда лень поискать, вот этим там реадизовано, где воровали, код виджета который я делал вижу сразу.