Pictures are not displayed in Chrome

[nicolasbadia]

When using the plugin in chrome there is no pictures visible.

I'm having the issue on my website and on the demo: https://sharebutton.co/
It seem to works fine in all other browser.

[PontusTideman]

Be glad for that... Downloading the latest and the share button dosen´t even display for me in either Safari nor Firefox on El Capitan! :/

[PontusTideman]

But for me the demo page is working fine in Chrome!

[RedPointMS]

It also doesn't work on IE11 nor Edge browsers, but works for me in Safari. As per #250 there seems to be untested new version that has improved cross-browser compatibility. Unfortunately I am not able to test it as it requires a build environment to create distribution files, and I was not successful in creating one.
In the meantime I did some digging in the CSS and it seems that there are problems with <svg> tags. When I used SVG editor, exported and pasted updated content I was able to see the icons in all browsers. The side effect however is that the icons are not centered within the boxes in IE nor Edge, but look fine in other browsers.

[superKalo]

I have the same issue. On Chrome 50, and IE - icons are invisible.

So here's a workaround that I did. I took the SVG images from the repo, I added a second version of each (example: pinterest-light.svg) that's the same, but white (with fill="white") and finally I overrode the messed-up plugin styles - updating the background-image with the external SVGs that I placed in my project /img/share-button directory. Here's an example.

share-button .sb-social li[class*='pinterest']:after {
    background-image: url('/img/share-button/pinterest.svg');
}
share-button .sb-social li[class*='pinterest']:before {
    background-image: url('/img/share-button/pinterest-light.svg');
}

So I did this steps for all icons that I needed. It works on Chrome, Firefox, Safari and IE latest. The only issue is that it 'costs' a few additional server (http) requests. But I guess, this is still better then not working at all :)

And here's my full fix. Download the zip: share-button-svgs.zip and extract it in your images directory. Than paste this styles in your project stylesheet, making sure the url on your side is correct.

/**
 * Solves the issues with SVG as a background image,
 * that doesn't display on Chrome 50 and IE latest.
 * This way it works on Chrome, Firefox, Safari and IE latest.
 *
 * https://github.com/carrot/share-button/issues/301
 */
share-button .sb-social li[class*='pinterest']:after {
    background-image: url('/img/share-button/pinterest.svg');
}
share-button .sb-social li[class*='pinterest']:before {
    background-image: url('/img/share-button/pinterest-light.svg');
}

share-button .sb-social li[class*='twitter']:after {
    background-image: url('/img/share-button/twitter.svg');
}

share-button .sb-social li[class*='twitter']:before {
    background-image: url('/img/share-button/twitter-light.svg');
}

share-button .sb-social li[class*='facebook']:after {
    background-image: url('/img/share-button/facebook.svg');
}
share-button .sb-social li[class*='facebook']:before {
    background-image: url('/img/share-button/facebook-light.svg');
}

share-button .sb-social li[class*='googlePlus']:after {
    background-image: url('/img/share-button/googlePlus.svg');
}
share-button .sb-social li[class*='googlePlus']:before {
    background-image: url('/img/share-button/googlePlus-light.svg');
}

share-button .sb-social li[class*='email']:after {
    background-image: url('/img/share-button/email.svg');
}
share-button .sb-social li[class*='email']:before {
    background-image: url('/img/share-button/email-light.svg');
}

share-button .sb-social li[class*='linkedin']:after {
    background-image: url('/img/share-button/linkedin.svg');
}
share-button .sb-social li[class*='linkedin']:before {
    background-image: url('/img/share-button/linkedin-light.svg');
}

[shanetheboland]

I’m having the same issue as @nicolasbadia

The icons show up in Safari and Firefox. But they aren’t appearing in Chrome.
You can see the live site here: http://www.ecovativedesign.com/blog/146

[hypergeometric]

@shanetheboland You seem to have fixed this on your site. What was the solution?

[shanetheboland]

@hypergeometric

1. Download this zip https://github.com/carrot/share-button/files/254008/newcss.zip
2. Move the new share-button.css into your css directory and replace the old share-button.css

Found the answer in Issue #305.

[hypergeometric]

@shanetheboland Awesome thanks!