修正Pinterest CSS

Question

我正在尝试为pinterest创建自定义按钮。我能够使用一个自定义图像作为按钮，但它不能正常工作。

这是我正在使用的CSS。

span[data-pin-log="button_pinit_bookmarklet"] {
}
span[data-pin-log="button_pinit_bookmarklet"]::after {
  content: url('../images/icon.png');
}

​

​

在ScreenShot中，我已经标记了我正在使用红色的按钮。我用蓝色标记了我想要去除的区域。

我在这个问题上被困了超过12个小时。所以，任何帮助都将是非常感谢的。

您可以使用以下代码获取Pinterest Button

<a data-pin-do="buttonBookmark" href="https://www.pinterest.com/pin/create/button/"></a>
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

Answer 1

自定义按钮

data-pin-custom="true"属性很重要，因为它保留了您的自定义标记，包括HTML and CSS。

<a href="https://www.pinterest.com/pin/create/button/"
   data-pin-do="buttonBookmark"
   data-pin-custom="true">
    --YOUR CUSTOM HTML--
</a>

​

-您的自定义HTML-给定如下所示

<img src="https://developers.pinterest.com/static/img/badge.svg" width="25" height="25">

​

<p>Ordinary button</p>

<a data-pin-do="buttonBookmark" href="https://www.pinterest.com/pin/create/button/"></a>
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

<p>Custom button</p>

<a data-pin-do="buttonPin" href="" data-pin-custom="true">
  <img src="https://developers.pinterest.com/static/img/badge.svg" width="25" height="25">
</a>

​

获得更多信息：访问