Кнопки поделиться со своим css

18.10.2015 | Просмотров этой темы: 11 183

Практически на всех сайтах есть кнопки поделиться в соц. сетях. Для этого есть даже специализированные сервисы, такие как Yandex-share или Addthis, которые предоставляют готовый набор кнопок с уже готовыми стилями и иконками.

Но иногда хочется чтобы иконки соц. сетей выглядили по другому и “вписывались” в дизайн сайта.

Для этого мы будем использовать fontello-share — css-файл, который изменяет иконки yandex-share на fontello

Клонируем или скачиваем репозиторий с github в папку c проектом

git clone https://github.com/tsarbas/fontello-share.git

Добавляем css на страницу

<link rel="stylesheet" href="/styles/fontello-share.css">

Добавляем блок yandex-share на страницу (в то место, где будут отображаться иконки)

<script type="text/javascript" src="http://yandex.st/share/share.js" charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none"
data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir,gplus"></div>

Пишем CSS

Для того чтобы иконки выглядели так, как нам хочется напишем следущий css-код:

<style>
    .b-share__handle.b-share__link {
          font-size: 16px;
          margin: 0 .5em;
          padding: .5em !important;
          height: auto !important;
          color: white;
          background: #2ba6cb
    }
</style>

Результат

http://sarbas.org/posts/fontello-share.html

Читайте похожие темы:

Рубрика: полезные советы
Некоторые статьи скопированы с посторонних ресурсов, и мы никаким образом не претендуем на них. И если владелец материала не желает видеть его у нас, может сообщить об этом в администрацию сайта. Если это ваша статья - напишите Нам, и мы поставим на Вас ссылку (оставьте координаты для связи)