替换photoswipe插件共享图标

Question

我正在尝试将photoswipe（箭头）中的现有共享图标替换为附加图片更加不言自明的内容。由于我不知道如何编辑原始的SVG精灵，我采取了另一种方法来替换这段代码：

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

通过此代码：

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

不幸的是，这不起作用（图像完全不可见），你知道为什么吗？

新图标：

韩国社交协会

Answer 1

您可以添加此css（您需要更改大小和位置，因为它没有与其他按钮相同的大小）：

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

我在这里创建了一个工作示例：http://codepen.io/anon/pen/GpKVQP