[SVG] Social Fonts Icons

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

Нет прав для скачивания
Совместимость версий
  1. 2.2
Страница демонстрации: 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
Верх Низ