替换 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

替换 photoswipe 插件分享图标

Replace photoswipe plugin share icon

css

svg

photoswipe