Как увеличить кнопки Поделиться от Яндекса?

Сегодня заметка на такую мелочную тему, но возможно кому-то из вас будет полезна. У Яндекса, как вы знаете, есть свои социальные кнопки для расшаривания контента в соц. сетях.

Они мне нравятся — хорошие иконки, есть возможность включить счетчик для некоторых сайтов + большой их выбор. Единственный нюанс — нельзя настроить размер. Вернее, можно выбрать только между средними и маленькими кнопками, но что делать, если нужны большие?
средние иконки
В этой заметке я как раз опишу, как решить эту небольшую проблему. Показывать, как устанавливаются соц. кнопки я не буду, когда-то давно уже писал статью об этом.

Увеличиваем кнопки поделиться от Яндекса

Я возьму всего несколько кнопок и поставлю на простую веб-страницу — как выглядят средние по размеру кнопки вы могли видеть выше.

Чтобы изменить размер кнопок, нужно понять, какой css класс отвечает за это. Кликаем по любой иконке правой кнопкой и нажимаем Исследовать элемент.исследовать элемент


Ага, вот я и вижу в коде, что за размер иконок отвечает класс ya-share2__icon. Как теперь изменить размер кнопок?

  1. Открываем главный css-файл вашего сайта, обычно называется style.css или main.css.
  2. Вставляем туда такой код:
    .ya-share2__icon{
    	width: Npx!important;
    	height: Npx!important;
    	background-size: Npx Npx!important;
    }

Все N нужно заменить на числа — сколько именно пикселей размером вы хотите сделать иконки. По умолчанию средние иконки от Яндекса имеют ширину 24 пикселя и такую же высоту, а размер фона 24х24. Как видите, все 4 значения должны быть одинаковыми, если вы хотите сохранить иконки в их текущем виде.

Ключевое слово !important нужно для того, чтобы точно перебить стили, поставленные по умолчанию. Теперь пробую сделать большие иконки:

.ya-share2__icon{
	width: 36px!important;
	height: 36px!important;
	background-size: 36px 36px!important;
}

И вот результат:

Другие манипуляции

Если иконки со счетчиками, то вам также придется увеличивать размер шрифта числа в счетчике. Делается это так же — исследуем блок, определяем, какой класс отвечает за размер шрифта и преопределяем для него стили. Если оставить все как есть, увеличив только иконки, то будет вот так:

Если такое отображение не устраивает, можно легко его поправить, переопределив стили для ya-share2__counter:

.ya-share2__counter{
	font-size: 18px!important;
    line-height: 36px!important;
}

Вот, изначальные значения были 12 пикселей (размер шрифта) и 24 пикселя (высота строки). Мы их увеличили пропорционально иконкам. Теперь выглядит так:

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

.ya-share2{
	margin: 20px 0;
}

ya-share2 это как раз общий контейнер для кнопок. Отступы будут добавлены сверху и снизу по 20 пикселей. А вообще, как вы поняли, зная css можно как угодно перемещать, позиционировать, увеличивать и крутить кнопки от Яндекса, адаптировав их под ваш конкретный сайт.

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: