Кнопки «расшаривания» в социальные сети

share
sm
md
lg
xl

В SIMAI Framework с помощью модификаторов можно создавать кнопки расшаривания

Структура кнопок

Для того чтобы создать кнопки расшаривания вам необходимо создать следующую структуру

<div class="sf-share" data-url="Адрес расшаиваемой страницы">
	<div class="sf-share-btn" data-service="ID социальной сети">
		<div class="sf-share-icon">Иконка</div>
		<div class="sf-share-title">Описание</div>
		<div class="sf-share-counter">Счетчик</div>
	</div>
</div>

Кнопки поддерживаются для следующих социальных сетей:

  • facebook - Facebook
  • vkontakte - Вконтакте
  • twitter - Facebook
  • plusone - Google Plus
  • pinterest - Pinterest
  • odnoklassniki - Одноклассники
  • mailru - МойМир

Код социальной сети указывается в кнопке социальной сети, в дата-атрибуте data-service. Если вам не нужна какая либо социальная сеть, то для нее не нужно указывать код кнопки. Также в самой кнопке вы самостоятельно решаете какие блоки (иконка, текст, счетчик) вам нужны для отображения.

Примеры реализации

Использутей иконочные шрифты и модификаторы, чтобы создать любой внешний вид кнопок.

Кнопки с иконкой, описанием и счетчиком

Поделиться
в Фейсбуке
10
Поделиться
в ВКонтакте
5
Поделиться
в Твиттер
125
Поделиться
в ГуглПлюс
125
Поделиться
в Пинтерест
18
Поделиться
в Одноклассники
87
Поделиться
в МойМир
87
<div class="sf-share flex flex-wrap" data-url="https://simai.studio">
    <div class="sf-share-btn cursor-pointer transition flex border-1 border-primary hover:border-primary radius-1/3 flex-wrap items-cross-center bg-primary hover:bg-primary color-on-surface-inverse " data-service="facebook">
        <div class="sf-share-icon p-1/2 text-center t-3">
            <i class="fab fa-facebook-f"></i>
        </div>
        <div class="sf-share-title text-1/4 p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 border-right-1 border-left-1 border-surface-0">
            Поделиться<br>в Фейсбуке
        </div>
        <div class="sf-share-counter p-1/2 text-2">
            10
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer transition flex border-1 border-primary hover:border-primary radius-1/3 flex-wrap items-cross-center bg-primary hover:bg-primary color-on-surface-inverse " data-service="vkontakte">
        <div class="sf-share-icon p-1/2 text-center t-3">
            <i class="fab fa-vk"></i>
        </div>
        <div class="sf-share-title text-1/4 p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 border-right-1 border-left-1 border-surface-0">
            Поделиться<br>в ВКонтакте
        </div>
        <div class="sf-share-counter p-1/2 text-2">
            5
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer transition border-1 border-primary-container hover:border-primary-container radius-1/3 flex flex-wrap items-cross-center bg-tw bg-primary hover:bg-primary color-on-surface-inverse " data-service="twitter">
        <div class="sf-share-icon p-1/2 text-center t-3">
            <i class="fab fa-twitter"></i>
        </div>
        <div class="sf-share-title text-1/4 p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 border-right-1 border-left-1 border-surface-0">
            Поделиться<br>в Твиттер
        </div>
        <div class="sf-share-counter p-1/2 text-2">
            125
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer transition border-1 border-error hover:bg-error radius-1/3 flex flex-wrap items-cross-center bg-gp bg-error hover:bg-error color-on-surface-inverse " data-service="plusone">
        <div class="sf-share-icon p-1/2 text-center t-3">
            <i class="fab fa-google-plus-g"></i>
        </div>
        <div class="sf-share-title text-1/4 p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 border-right-1 border-left-1 border-surface-0">
            Поделиться<br>в ГуглПлюс
        </div>
        <div class="sf-share-counter p-1/2 text-2">
            125
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer transition border-1 border-error hover:bg-error radius-1/3 flex flex-wrap items-cross-center bg-gp bg-error hover:bg-error color-on-surface-inverse " data-service="pinterest">
        <div class="sf-share-icon p-1/2 text-center t-3">
            <i class="fab fa-pinterest-p"></i>
        </div>
        <div class="sf-share-title text-1/4 p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 border-right-1 border-left-1">
            Поделиться<br>в Пинтерест
        </div>
        <div class="sf-share-counter p-1/2 text-2">
            18
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer border-warning hover:b-orange-6 transition border-1 radius-1/3 flex flex-wrap items-cross-center bg-ok bg-warning hover:bg-warning color-on-surface-inverse " data-service="odnoklassniki">
        <div class="sf-share-icon p-1/2 text-center t-3">
            <i class="fab fa-odnoklassniki"></i>
        </div>
        <div class="sf-share-title text-1/4 p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 border-right-1 border-left-1 border-surface-0">
            Поделиться<br>в Одноклассники
        </div>
        <div class="sf-share-counter p-1/2 text-2">
            87
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer transition flex border-1 border-primary hover:border-primary radius-1/3 flex-wrap items-cross-center bg-primary hover:bg-primary color-on-surface-inverse " data-service="mailru">
        <div class="sf-share-icon p-1/2 text-center t-3 color-orange">
            <i class="far fa-at"></i>
        </div>
        <div class="sf-share-title text-1/4 p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 border-right-1 border-left-1">
            Поделиться<br>в МойМир
        </div>
        <div class="sf-share-counter p-1/2 text-2">
            87
        </div>
    </div>
</div>

Кнопки с описанием и счетчиком

Поделиться
в Фейсбуке
10
Поделиться
в ВКонтакте
5
Поделиться
в Твиттер
125
Поделиться
в ГуглПлюс
125
Поделиться
в Пинтерест
18
Поделиться
в Одноклассники
87
Поделиться
в МойМир
87
<div class="sf-share flex flex-wrap" data-url="https://simai.studio">
    <div class="sf-share-btn cursor-pointer transition flex border-1 border-primary hover:border-primary radius-1/3 flex-wrap items-cross-center bg-primary hover:bg-primary color-on-surface-inverse " data-service="facebook">
        <div class="sf-share-title text-1/4 p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 border-right-1 border-surface-0">
            Поделиться<br>в Фейсбуке
        </div>
        <div class="sf-share-counter p-1/2 text-2">
            10
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer transition flex border-1 border-primary hover:border-primary radius-1/3 flex-wrap items-cross-center bg-primary hover:bg-primary color-on-surface-inverse " data-service="vkontakte">
        <div class="sf-share-title text-1/4 p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 border-right-1 border-surface-0">
            Поделиться<br>в ВКонтакте
        </div>
        <div class="sf-share-counter p-1/2 text-2">5</div>
    </div>
    <div class="sf-share-btn cursor-pointer transition border-1 border-primary-container hover:border-primary-container radius-1/3 flex flex-wrap items-cross-center bg-tw bg-primary hover:bg-primary color-on-surface-inverse " data-service="twitter">
        <div class="sf-share-title text-1/4 p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 border-right-1 v-white">
            Поделиться<br>в Твиттер
        </div>
        <div class="sf-share-counter p-1/2 text-2">
            125
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer transition border-1 border-error hover:bg-error radius-1/3 flex flex-wrap items-cross-center bg-gp bg-error hover:bg-error color-on-surface-inverse " data-service="plusone">
        <div class="sf-share-title text-1/4 p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 border-right-1 border-surface-0">
            Поделиться<br>в ГуглПлюс
        </div>
        <div class="sf-share-counter p-1/2 text-2">
            125
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer transition border-1 border-error hover:bg-error radius-1/3 flex flex-wrap items-cross-center bg-gp bg-error hover:bg-error color-on-surface-inverse " data-service="pinterest">
        <div class="sf-share-title text-1/4 p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 border-right-1 border-surface-0">
            Поделиться<br>в Пинтерест
        </div>
        <div class="sf-share-counter p-1/2 text-2">
            18
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer border-warning hover:b-orange-6 transition border-1 radius-1/3 flex flex-wrap items-cross-center bg-ok bg-warning hover:bg-warning color-on-surface-inverse " data-service="odnoklassniki">
        <div class="sf-share-title text-1/4 p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 border-right-1 border-surface-0">
            Поделиться<br>в Одноклассники
        </div>
        <div class="sf-share-counter p-1/2 text-2">
            87
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer transition flex border-1 border-primary hover:border-primary radius-1/3 flex-wrap items-cross-center bg-primary hover:bg-primary color-on-surface-inverse " data-service="mailru">
        <div class="sf-share-title text-1/4 p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 border-right-1 border-surface-0">
            Поделиться<br>в МойМир
        </div>
        <div class="sf-share-counter p-1/2 text-2">
            87
        </div>
    </div>
</div>

Кнопки с иконкой и описанием

Поделиться
в Фейсбуке
Поделиться
в ВКонтакте
Поделиться
в Твиттер
Поделиться
в ГуглПлюс
Поделиться
в Пинтерест
Поделиться
в Одноклассники
Поделиться
в МойМир 
<div class="sf-share flex flex-wrap" data-url="https://simai.studio">
    <div class="sf-share-btn cursor-pointer transition flex border-1 border-primary hover:border-primary radius-1/3 flex-wrap items-cross-center bg-primary hover:bg-primary color-on-surface-inverse " data-service="facebook">
        <div class="sf-share-icon p-1/2">
            <i class="fab fa-facebook-f"></i>
        </div>
        <div class="sf-share-title text-1/4 p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 border-left-1 border-surface-0">
            Поделиться<br>в Фейсбуке
        </div>
    </div>

    <div class="sf-share-btn cursor-pointer transition flex border-1 border-primary hover:border-primary radius-1/3 flex-wrap items-cross-center bg-primary hover:bg-primary color-on-surface-inverse " data-service="vkontakte">
        <div class="sf-share-icon p-1/2">
            <i class="fab fa-vk"></i>
        </div>
        <div class="sf-share-title text-1/4 p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 border-left-1 border-surface-0">
            Поделиться<br>в ВКонтакте
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer transition border-1 border-primary-container hover:border-primary-container radius-1/3 flex flex-wrap items-cross-center bg-tw bg-primary hover:bg-primary color-on-surface-inverse " data-service="twitter">
        <div class="sf-share-icon p-1/2">
            <i class="fab fa-twitter"></i>
        </div>
        <div class="sf-share-title text-1/4 p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 border-left-1 border-surface-0">
            Поделиться<br>в Твиттер
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer transition border-1 border-error hover:bg-error radius-1/3 flex flex-wrap items-cross-center bg-gp bg-error hover:bg-error color-on-surface-inverse " data-service="plusone">
        <div class="sf-share-icon p-1/2">
            <i class="fab fa-google-plus-g"></i>
        </div>
        <div class="sf-share-title text-1/4 p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 border-left-1 border-surface-0">
            Поделиться<br>в ГуглПлюс
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer transition border-1 border-error hover:bg-error radius-1/3 flex flex-wrap items-cross-center bg-gp bg-error hover:bg-error color-on-surface-inverse " data-service="pinterest">
        <div class="sf-share-icon p-1/2">
            <i class="fab fa-pinterest-p"></i>
        </div>
        <div class="sf-share-title text-1/4 p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 border-left-1 border-surface-0">
            Поделиться<br>в Пинтерест
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer border-warning hover:b-orange-6 transition border-1 radius-1/3 flex flex-wrap items-cross-center bg-ok bg-warning hover:bg-warning color-on-surface-inverse " data-service="odnoklassniki">
        <div class="sf-share-icon p-1/2">
            <i class="fab fa-odnoklassniki"></i>
        </div>
        <div class="sf-share-title text-1/4 p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 border-left-1 border-surface-0">
            Поделиться<br>в Одноклассники
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer transition flex border-1 border-primary hover:border-primary radius-1/3 flex-wrap items-cross-center bg-primary hover:bg-primary color-on-surface-inverse " data-service="mailru">
        <div class="sf-share-icon p-1/2">
            <i class="far fa-at"></i>
        </div>
        <div class="sf-share-title text-1/4 p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 border-left-1 border-surface-0">
            Поделиться<br>в МойМир
        </div>
    </div>
</div>

Кнопки с иконкой и счетчиком

2
3
3
3
1
2
10 
<div class="sf-share flex flex-wrap" data-url="https://simai.studio">
    <div class="sf-share-btn cursor-pointer transition flex border-1 border-primary hover:border-primary radius-1/3 flex-wrap items-cross-center bg-primary hover:bg-primary color-on-surface-inverse " data-service="facebook">
        <div class="sf-share-icon p-1/2 text-1">
            <i class="fab fa-facebook-f"></i>
        </div>
        <div class="sf-share-counter p-1/2 text-1 border-left-1 border-surface-0">
            2
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer transition flex border-1 border-primary hover:border-primary radius-1/3 flex-wrap items-cross-center bg-primary hover:bg-primary color-on-surface-inverse " data-service="vkontakte">
        <div class="sf-share-icon p-1/2 text-1">
            <i class="fab fa-vk"></i>
        </div>
        <div class="sf-share-counter p-1/2 text-1 border-left-1 border-surface-0">
            3
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer transition border-1 border-primary-container hover:border-primary-container radius-1/3 flex flex-wrap items-cross-center bg-tw bg-primary hover:bg-primary color-on-surface-inverse " data-service="twitter">
        <div class="sf-share-icon p-1/2 text-1 twitter">
            <i class="fab fa-twitter"></i>
        </div>
        <div class="sf-share-counter p-1/2 text-1 border-left-1 border-surface-0">
            3
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer transition border-1 border-error hover:bg-error radius-1/3 flex flex-wrap items-cross-center bg-gp bg-error hover:bg-error color-on-surface-inverse " data-service="plusone">
        <div class="sf-share-icon p-1/2 text-1">
            <i class="fab fa-google-plus-g"></i>
        </div>
        <div class="sf-share-counter p-1/2 text-1 border-left-1 border-surface-0">
            3
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer transition border-1 border-error hover:bg-error radius-1/3 flex flex-wrap items-cross-center bg-gp bg-error hover:bg-error color-on-surface-inverse " data-service="pinterest">
        <div class="sf-share-icon p-1/2 text-1">
            <i class="fab fa-pinterest-p"></i>
        </div>
        <div class="sf-share-counter p-1/2 text-1 border-left-1 border-surface-0">
            1
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer border-warning hover:b-orange-6 transition border-1 radius-1/3 flex flex-wrap items-cross-center bg-ok bg-warning hover:bg-warning color-on-surface-inverse " data-service="odnoklassniki">
        <div class="sf-share-icon p-1/2 text-1">
            <i class="fab fa-odnoklassniki"></i>
        </div>
        <div class="sf-share-counter p-1/2 text-1 border-left-1 border-surface-0">
            2
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer transition flex border-1 border-primary hover:border-primary radius-1/3 flex-wrap items-cross-center bg-primary hover:bg-primary color-on-surface-inverse " data-service="mailru">
        <div class="sf-share-icon p-1/2 text-1">
            <i class="far fa-at"></i>
        </div>
        <div class="sf-share-counter p-1/2 text-1 border-left-1 border-surface-0">
            10
        </div>
    </div>
</div>

Кнопки только с иконкой

<div class="sf-share flex flex-wrap" data-url="https://simai.studio">
    <div class="sf-share-btn cursor-pointer transition flex border-1 border-primary hover:border-primary radius-1/3 flex-wrap items-cross-center bg-primary hover:bg-primary color-on-surface-inverse " data-service="facebook">
        <div class="sf-share-icon w-d2 h-d2 flex items-cross-center content-center">
            <i class="fab fa-facebook-f"></i>
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer transition flex border-1 border-primary hover:border-primary radius-1/3 flex-wrap items-cross-center bg-primary hover:bg-primary color-on-surface-inverse " data-service="vkontakte">
        <div class="sf-share-icon w-d2 h-d2 flex items-cross-center content-center">
            <i class="fab fa-vk"></i>
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer transition border-1 border-primary-container hover:border-primary-container radius-1/3 flex flex-wrap items-cross-center bg-tw bg-primary hover:bg-primary color-on-surface-inverse " data-service="twitter">
        <div class="sf-share-icon w-d2 h-d2 flex items-cross-center content-center">
            <i class="fab fa-twitter"></i>
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer transition border-1 border-error hover:bg-error radius-1/3 flex flex-wrap items-cross-center bg-gp bg-error hover:bg-error color-on-surface-inverse " data-service="plusone">
        <div class="sf-share-icon w-d2 h-d2 flex items-cross-center content-center">
            <i class="fab fa-google-plus-g"></i>
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer transition border-1 border-error hover:bg-error radius-1/3 flex flex-wrap items-cross-center bg-gp bg-error hover:bg-error color-on-surface-inverse " data-service="pinterest">
        <div class="sf-share-icon w-d2 h-d2 flex items-cross-center content-center">
            <i class="fab fa-pinterest-p"></i>
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer border-warning hover:b-orange-6 transition border-1 radius-1/3 flex flex-wrap items-cross-center bg-ok bg-warning hover:bg-warning color-on-surface-inverse " data-service="odnoklassniki">
        <div class="sf-share-icon w-d2 h-d2 flex items-cross-center content-center">
            <i class="fab fa-odnoklassniki"></i>
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer transition flex border-1 border-primary hover:border-primary radius-1/3 flex-wrap items-cross-center bg-primary hover:bg-primary color-on-surface-inverse " data-service="mailru">
        <div class="sf-share-icon w-d2 h-d2 flex items-cross-center content-center">
            <i class="far fa-at"></i>
        </div>
    </div>
</div>

Модификация иконок

Используйте модификаторы для изменения представления иконок.

<div class="sf-share flex flex-wrap" data-url="https://simai.studio">
    <div class="sf-share-btn cursor-pointer transition flex border-1 border-primary hover:border-primary flex-wrap items-cross-center bg-primary hover:bg-primary color-on-surface-inverse  radius-full" data-service="facebook">
        <div class="sf-share-icon w-d2 h-d2 flex items-cross-center content-center">
            <i class="fab fa-facebook-f"></i>
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer transition flex border-1 border-primary hover:border-primary flex-wrap items-cross-center bg-primary hover:bg-primary color-on-surface-inverse  radius-full" data-service="vkontakte">
        <div class="sf-share-icon w-d2 h-d2 flex items-cross-center content-center">
            <i class="fab fa-vk"></i>
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer transition border-1 border-primary-container hover:border-primary-container flex flex-wrap items-cross-center bg-tw bg-primary hover:bg-primary color-on-surface-inverse  radius-full" data-service="twitter">
        <div class="sf-share-icon w-d2 h-d2 flex items-cross-center content-center">
            <i class="fab fa-twitter"></i>
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer transition border-1 border-error hover:bg-error flex flex-wrap items-cross-center bg-gp bg-error hover:bg-error color-on-surface-inverse  radius-full" data-service="plusone">
        <div class="sf-share-icon w-d2 h-d2 flex items-cross-center content-center">
            <i class="fab fa-google-plus-g"></i>
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer transition border-1 border-error hover:bg-error flex flex-wrap items-cross-center bg-gp bg-error hover:bg-error color-on-surface-inverse  radius-full" data-service="pinterest">
        <div class="sf-share-icon w-d2 h-d2 flex items-cross-center content-center">
            <i class="fab fa-pinterest-p"></i>
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer border-warning hover:b-orange-6 transition border-1 flex flex-wrap items-cross-center bg-ok bg-warning hover:bg-warning color-on-surface-inverse  radius-full" data-service="odnoklassniki">
        <div class="sf-share-icon w-d2 h-d2 flex items-cross-center content-center">
            <i class="fab fa-odnoklassniki"></i>
        </div>
    </div>
    <div class="sf-share-btn cursor-pointer transition flex border-1 border-primary hover:border-primary flex-wrap items-cross-center bg-primary hover:bg-primary color-on-surface-inverse  radius-full" data-service="mailru">
        <div class="sf-share-icon w-d2 h-d2 flex items-cross-center content-center">
            <i class="far fa-at"></i>
        </div>
    </div>
</div>
<div class="sf-share flex flex-wrap" data-url="https://simai.studio">
    <div class="sf-share-btn border-top-1 border-bottom-1 border-left-1 border-surface-inverse w-d2 h-d2 flex items-cross-center content-center cursor-pointer color-on-primary hover:c-blue-6 transition" data-service="facebook">
        <div class="sf-share-icon">
            <i class="fab fa-facebook-f"></i>
        </div>
    </div>
    <div class="sf-share-btn border-top-1 border-bottom-1 border-left-1 border-surface-inverse w-d2 h-d2 flex items-cross-center content-center cursor-pointer color-primary hover:c-blue-5 transition" data-service="vkontakte">
        <div class="sf-share-icon">
            <i class="fab fa-vk"></i>
        </div>
    </div>
    <div class="sf-share-btn border-top-1 border-bottom-1 border-surface-inverse border-left-1 w-d2 h-d2 flex items-cross-center content-center cursor-pointer color-on-primary-container-graphic hover:c-blue-2 transition" data-service="twitter">
        <div class="sf-share-icon">
            <i class="fab fa-twitter"></i>
        </div>
    </div>
    <div class="sf-share-btn border-top-1 border-bottom-1 border-left-1 border-surface-inverse w-d2 h-d2 flex items-cross-center content-center cursor-pointer color-on-error hover:c-red-6 transition" data-service="plusone">
        <div class="sf-share-icon">
            <i class="fab fa-google-plus-g"></i>
        </div>
    </div>
    <div class="sf-share-btn border-top-1 border-bottom-1 border-left-1 border-surface-inverse w-d2 h-d2 flex items-cross-center content-center cursor-pointer color-on-error hover:c-red-6 transition" data-service="pinterest">
        <div class="sf-share-icon">
            <i class="fab fa-pinterest-p"></i>
        </div>
    </div>
    <div class="sf-share-btn border-top-1 border-bottom-1 border-left-1 border-surface-inverse w-d2 h-d2 flex items-cross-center content-center cursor-pointer color-on-warning hover:c-orange-6 transition" data-service="odnoklassniki">
        <div class="sf-share-icon">
            <i class="fab fa-odnoklassniki"></i>
        </div>
    </div>
    <div class="sf-share-btn border-1 border-surface-inverse w-d2 h-d2 flex items-cross-center content-center cursor-pointer color-primary hover:c-blue-5 transition" data-service="mailru">
        <div class="sf-share-icon">
            <i class="far fa-at"></i>
        </div>
    </div>
</div>

Адаптивность

Для установки адаптивности кнопок расшаривания, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору.

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью