Два способа как увеличить иконки блока «Поделиться» от Яндекс

 19 ноября 2017      
 HTML & CSS      
 1 комментарий      
 103

По-умолчанию размер кнопок блока социальных сетей «Поделиться» от Яндекс не превышает 24 пикселей. Напомню, что блок «Поделиться» помогает посетителям вашего сайта быстро публиковать ссылки на интересные им страницы в социальных сетях и блогах, и о нем я писал ранее. А в этой статье я расскажу как с помощью CSS изменить размер этих иконок.

Код вызова блока социальных кнопок Яндекс «Поделиться» выглядит следующим образом.



Код вызова блока Поделиться

Обратите внимание на имя класса стилей, который используется для оформления — ya-share2. Именно его мы и будем использовать для изменения размера иконок.

Как изменить размер кнопок Яндекс блока «Поделиться»

На своем сайте я использую следующий CSS код:

/* Социалка от Яндекса */

/* 1 */
.ya-share2__container_size_m .ya-share2__icon {
    height: 32px !important; /* 24px */
    width:  32px !important; /* 24px */
    background-size: 32px 32px !important; /* Увеличиваем кнопки, по-умолчанию: 24px 24px */
}

/* 2 */
.ya-share2__container_size_m .ya-share2__counter {
    font-size: 14px !important; /* Увеличиваем шрифт счетчиков, по-умолчанию: 12px */
    padding: 8px 10px 0 10px !important; /* 5px 8px 0 8px */
}

/* 3 */
.ya-share2__container_size_m .ya-share2__icon_more:before {
    line-height: 22px !important; /* 13px */
}
.ya-share2__container_size_m .ya-share2__popup_direction_bottom {
    top: 36px !important; /* 28px */
}

Как изменить все свойства блока Поделиться

Если хотите изменить блок социальных иконок от Яндекса до неузнаваемости, то посмотрите его HTML код, чтобы определиться с необходимыми стилями. Для этого щелкните на нем правой кнопкой мыши и выберите пункт «Исследовать элемент» в меню:


Исследовать элемент

Браузерный инструмент Исследовать элемент

После этого зная элементы верстки и их стили можно полностью оптимизировать отображение блока «Поделиться» в соответствии с дизайном вашего сайта.

CSS свойство TRANSFORM — альтернативный способ изменения размера иконок блока «Поделиться»

Если нужно просто увеличить размер иконок, то можно воспользоваться CSS3 свойством TRANSFORM. Чтобы кнопки стали в полтора раза больше, то есть вместо 24 пикселей увеличились до 32-х, используйте следующий CSS код:

.ya-share2__list {
  transform: translate(25%, 25%) scale(1.5);
}

Здесь,
scale задет масштаб, а
translate — сдвигает элемент на указанные значения по горизонтали и вертикали

Читайте также:  Как проверить адаптивный дизайн сайта

Благодарности

При написании статьи были использованы следующие источники:

  1. https://ru.stackoverflow.com/questions/539603/Размер-кнопок-в-блоке-Яндекс-Поделиться
  2. https://timbv.wordpress.com/2016/04/14/настройка-внешнего-вида-блока-подели/
  3. https://dolinacoda.ru/kak-uvelichit-knopki-podelitsya-ot-yandeksa/
Поделись страницей с друзьями!

Обсуждение: есть 1 комментарий

  1. Сергеевич:

    Спасибо. Второй способ проще.

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Нажимая кнопку "Отправить" я даю свое согласие на обработку введенной мной персональной информации в соответствии с Федеральным Законом от 27.07.2006 №152-ФЗ "О персональных данных", на условиях и для целей определенных политикой конфиденциальности.

2017 © Технический блог
SQL - 73 | 0,251 сек. | 10.95 МБ
доступность сайта