自定义 twitter 和 fb 分享按钮图像答案

【问题标题】：Customize twitter and fb share button image自定义 twitter 和 fb 分享按钮图像
【发布时间】：2012-09-03 10:48:43
【问题描述】：

我的页面中有这段代码：

<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php echo $refLink; ?>" data-text="my text data" data-via="testdata" data-lang="it" data-size="large" data-count="none" data-dnt="true">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>


<a name="fb_share" type="button" 
share_url="<?php echo $refLink; ?>" id="facebook-share">Facebook</a> 
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">
</script>

哪些显示默认按钮（带有渐变的 Twitter 按钮和 fb 共享蓝色图标），但现在我想要两个灰色背景，没有这些图像......我该如何自定义它们？

我尝试使用他们的选择器自定义 CSS，但图像总是覆盖我的 css background-color。

【问题讨论】：

标签： css facebook user-interface twitter

【解决方案1】：

将#facebook-share div 的 css opacity 属性设置为 0，然后在其周围放置另一个具有正确背景颜色的 div。

例如。

<div id="fb-wrap"><a name="fb_share" type="button" 
share_url="<?php echo $refLink; ?>" id="facebook-share">Facebook</a></div>

css:
#fb-wrap{
  background-color: #foo;
}
#facebook-share{
  opacity: 0;
}

当然，您可以在包装 div 上使用背景图像，并为按钮使用您喜欢的任何图像。

【讨论】：

谢谢，推特呢？