How to change / replace icons in the block to share from Yandex.
The API does not say this.

1 answer 1

For example, replace the background either for the common or for each icon:

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; } 
 <script src="http://yandex.st/share/share.js"></script> <div id="share"></div>

Another option with :before using the font-awesome icons as an example:

 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; } 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" /> <script src="http://yandex.st/share/share.js"></script> <div id="share"></div>