Search code examples
csssvgphotoswipe

Replace photoswipe plugin share icon

I'm trying to replace the existing share icon in photoswipe (an arrow) with something more self-explanatory like the picture attached. Since I don't know how to edit the original SVG sprite I took an other approach which is to replace this piece of code:

.pswp__button--share {
  background-position: -44px -44px; }

by this code:

.pswp__button--share {
  background-image: url(http://www.example.com/wp-content/uploads/fbshare.png);
}

Unfortunately that doesn't work (the image is not visible at all), would you know why?

The new icon:

enter image description here

Tks

Solution

  • You can add this css (You need to change size and positioning, since it doesn't have the same size as the other buttons):

    .pswp__button.pswp__button--share {
  /*Not sure that was your image but you can adapt it to any image you want*/
  background-image: url(https://i.sstatic.net/HmjUo.png);
  width: 167px;/*width of the image*/
  /*Positioning*/
  background-size: auto;
  background-position: 0;
}

    I created a working example here: http://codepen.io/anon/pen/GpKVQP