修复Pinterest CSS

问题描述

我正在尝试为pinterest创建自定义按钮。我可以将自定义图片用作按钮，但无法正常工作。

这是我正在使用的CSS。

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

The ScreenShot

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

我在这个问题上停留了12多个小时。因此，我们将不胜感激任何帮助。

您可以使用这些代码获取Pinterest按钮

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

解决方法

对于自定义按钮

---

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>

更多信息：访问 https://developers.pinterest.com/docs/widgets/save/?