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

#html #css #яндекс

Каким образом изменить/заменить иконки в блоке поделиться от Яндекс.
В API об этом не сказано.
    

Ответы

Ответ 1

Например заменить фон либо общий, либо для каждой иконки:



new Ya.share({
  element: 'share',
  elementStyle: {
    'type': 'none',
    'quickServices': ['vkontakte', 'facebook', 'twitter']
  },
  link: document.location.href,
  title: document.title
});
#share .b-share-icon_vkontakte,
#share .b-share-icon_facebook,
#share .b-share-icon_twitter {
    width: 2rem;
    height: 2rem;
    display: inline-block;
    vertical-align: middle;
    background: transparent;
}

#share .b-share-icon_vkontakte {
    background: url(http://iconmonstr.com/wp-content/assets/preview/2013/96/iconmonstr-vk-1.png)
center no-repeat;
  -webkit-background-size: cover;
          background-size: cover;
}

#share .b-share-icon_facebook {
    background: url(http://iconmonstr.com/wp-content/assets/preview/2012/96/iconmonstr-facebook-1.png)
center no-repeat;
  -webkit-background-size: cover;
          background-size: cover;
}

#share .b-share-icon_twitter {
    background: url(http://iconmonstr.com/wp-content/assets/preview/2012/96/iconmonstr-twitter-1.png)
center no-repeat;
  -webkit-background-size: cover;
          background-size: cover;
}


    





Еще вариант с :before на примере иконок font-awesome:



new Ya.share({
  element: 'share',
  elementStyle: {
    'type': 'none',
    'quickServices': ['vkontakte', 'facebook', 'twitter']
  },
  link: document.location.href,
  title: document.title
});
#share {
  background: transparent;
}

#share [class*="b-share-icon_"] {
    width: 2rem;
    height: 2rem;
    display: inline-block;
    vertical-align: middle;
    background: transparent;
    position: relative;
    text-align: center;
}

#share [class*="b-share-icon_"]:before {
  display: inline-block;
  font: normal normal normal 2rem/2rem FontAwesome;
  color: #333;
}


#share .b-share-icon_vkontakte:before {
    content: '\f189';
}

#share .b-share-icon_facebook:before {
    content: "\f09a";
}

#share .b-share-icon_twitter:before {
   content: "\f099";
}


#share [class*="b-share-icon_"]:hover:before {
  color: tomato;
}