Плагин - [SVG] Social Fonts Icons - Авторская зона xenforo 2 Skaiman

Совместимость версий

Страница демонстрации: DEMO
Примеры использования в HTML:

HTML:

<span class="soc soc-discord"></span>

Результат:
Аналогичный резудьтат если использовать:

HTML:

<i class="soc soc-discord"></i>

Есть возможность изменения размера:

HTML:

<i class="soc soc-now soc-xs"></i>
<i class="soc soc-now soc-sm"></i>
<i class="soc soc-now soc-lg"></i>
<i class="soc soc-now soc-2x"></i>
<i class="soc soc-now soc-3x"></i>
<i class="soc soc-now soc-4x"></i>
<i class="soc soc-now soc-5x"></i>
<i class="soc soc-now soc-6x"></i>
<i class="soc soc-now soc-7x"></i>
<i class="soc soc-now soc-8x"></i>
<i class="soc soc-now soc-9x"></i>
<i class="soc soc-now soc-10x"></i>

Можно добавить стиль:

HTML:

<span class="soc soc-quora" style="font-size: 20px; color: #B92B27"></span>

С дополнением устанавливается бб-код, для использования в постах:

Код:

[SOC]soc-discord[/SOC]

Код:

[SOC]soc-now soc-2x[/SOC]

Код:

[SOC=font-size: 20px; color: #B92B27]soc-quora[/SOC]

Примеры использования в CSS/LESS:

HTML:

<div class="soc-test">
    <p>Смотрим на RuTube</p>
</div>

CSS:

.soc-test:before {
    font-family: 'socicons';
    content: '\d200';
    display: inline-block;
    margin-right: 3px;
}

Смотрим на RuTube
или

Less:

.soc-test {
    &:before {
        font-family: 'socicons';
        content: @soc-rutube;
        display: inline-block;
        margin-right: 3px;
    }
}

Реакции: garri83 и Pokschubin

Плагин [SVG] Social Fonts Icons 2.2.10

Ещё ресурсы от Skaiman

Поделиться этим ресурсом