修复 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');
}

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

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>

--YOUR CUSTOM 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/?

修复 Pinterest CSS

Fix Pinterest CSS

css

css-selectors

pinterest

对于自定义按钮