Мой блог онлайн журнал! Меня нет в ЖЖ-дневнике и на лесби форумах. Я обычная девушка-блоггер! Мои заметки о любви и цитатах, о детях, о машинах, полезные советы и новости, рецепты и домашние заботы!

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

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

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

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

Подключаем fontello-share

Клонируем или скачиваем репозиторий с 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

Оставить комментарий

Blue Captcha Image
Новый проверочный код

*

..

Мы живем и радуем наших читателей

Подписка на почту:

Сервис FeedBurner

Топ просмотров
Blog Traffic

Pages

Pages|Hits |Unique

  • Last 24 hours: 482
  • Last 7 days: 6 179
  • Last 30 days: 21 487
  • Online now: 4
Яндекс.Метрика

Нравится