Клуб пользователей блока «Поделиться»

Как изменить иконки?

Подскажите, пожалуйста, как правильно стилизовать иконки? Хочу использовать блок "Поделиться" в конструкторе сайта Webflow. Понимаю, что вопрос, наверное, глупый, но я в этом деле новичок. Буду благодарен за пример кода. В идеале хотелось бы просто вставить картинку иконки, чтобы, кликнув на нее, пользователь мог поделиться публикацией.

10 комментариев
Пожалуй, краткий ответ будет звучать так: стилизация иконок в блоке Поделиться не предусмотрена.


Если всё-таки очень хочется, блок предоставляет опцию data-bare, при указании которой перестают подключаться все CSS-стили, и вы можете определить их сами.


Как вариант попроще могу предложить посмотреть в инспекторе браузера (например Chrome Developer Tools) посмотреть на разметку блока и выборочно переопределить нужные стили. Этот вариант не рекомендуется к использованию, так как при обновлении блока ваши изменения могут повести себя неожиданным образом. Но это наиболее простой для новичка вариант, так что можно начать с него.
Сергей Кожин
15 июня 2017, 13:13
Пожалуй самый простой способ.

1)Сверстай нужные тебе кнопки как душе будет угодно.
2)Добавь кнопки от яндекса. Скрой их.
3)Джава скриптом сделай чтобы при нажатии на твою кнопку происходил щелчок по нужной кнопке от яндекса.
Что, так сложно предусмотреть возможность определить свои цвета и наличие рамок для значков и дать возможность стилизовать покрасить иконки под дизайн сайта. А если, например, дизайн строго в черно-белых тонах?


"...стилизация иконок в блоке Поделиться не предусмотрена...", "...опцию data-bare, при указании которой перестают подключаться все CSS-стили..."


Вообще-то немного странно звучат эти фразы.
Поясню, почему:
- в вашем блоке присутствует несколько избыточная информация, так как выбирая, к примеру, всего 5 кнопок, остальные все равно грузятся, так как почти весь код вместе с иконками (которые svg) и "стилями" находится внутри основного скрипта (его размер, к сведению 87Кб);
- компания, которая требует оптимизации кода от индексируемых ей сайтов, предлагает код, половина которого, в случае неполного выбора, просто не будет работать. Страница, набирающая подобных блоков даже 5-10 штук, уже увеличивается на 1 Мб, не считая времени на выполнение 1Мб-го кода! А предлагая отключать все стили, Вы вынуждаете подключать свои, что дополнительно увеличивает код!;
- SVG - это векторный формат, который в вашем случае описан прямо в скрипте, не имеет рамок, может быть после описания окрашен в любой цвет и оформлен "как душа пожелает" в любой момент при его вызове.;


Вы, конечно, имеете полное право выступать в качестве законодателей, но странно, что где-то свобода действий предполагается вами, а где-то нет.


"Если уж делать, то делать хорошо!" - разве не ваш девиз?
Обновлено 23 сентября 2017, 13:34
Oleg Kо.,
Вы написали хорошие, правильные вещи. Но я не увидел, что именно вы предлагаете сделать.
sameoldmadness,
вроде он дал понять) сделать лучше. сделать то, что не есть СЕЙЧАС)
   Если Вы (ваша команда) работаете не для себя, то было бы хорошим тоном для ваших разработчиков предоставить конечным пользователям возможность максимально менять внешнее оформление вашего блока под свои нужды, а не предлагать опцию bare для всех случаев. Смею предположить, что их не так уж и много.


"...SVG - это векторный формат, который в вашем случае описан прямо в скрипте, не имеет рамок, может быть после описания окрашен в любой цвет..."


   Блок "Поделиться" обязательно должен иметь возможность изменения параметров:
- размер иконок не в двух вариантах, а в пикселях;
- расстояние между иконками (не обязательно, но желательно);
- наличие квадрата или рамки вокруг логотипа соцсети;
- цвет квадрата или рамки вокруг логотипа;
- цвет самого логотипа.


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

Было бы супер!
Обновлено 27 сентября 2017, 12:11
Oleg Kо.,
Пожелания увидел и зафиксировал, спасибо за предложения.


Обещать, что всё сделаем, не могу. Зато могу по секрету поделиться, что мы работаем над обновлённым внешним видом кнопок.
sameoldmadness,
согласен с выше сказанными фактами. Мне кажется, что решения от Яндекс должны говорить о профессионализме, но сейчас они это не говорят.

p.s. почти 2019 и всё ещё приходится делать такие костыли( это ужасно
Обновлено 14 декабря 2018, 02:04
Aison R.,
уже 2023 и 
"...стилизация иконок в блоке Поделиться не предусмотрена...", "...опцию data-bare, при указании которой перестают подключаться все CSS-стили..."
Обновлено 21 февраля 2023, 08:44
Все очень просто, находишь родительский класс иконок, обычно это ya-share2__badge и для каждой иконки свой класс также (ya-share2__item_service_vkontakte для вк пример).

Далее, в скрипте просто через js обращаешься к $('.ya-share2__item_service_vkontakte .ya-share2__badge').html(---тут свой html с иконками и чем хочешь---);