如何更改Facebook共享按钮图标的大小

Question

默认情况下，共享图标的大小非常小。 我想用更大的图标替换图标。

我使用Share Button API和以下代码：

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

...我把这个插件的代码放在我希望共享按钮出现在我的页面上的任何地方：

<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="icon"></div>

我希望用于此类按钮的图标更大，但无法弄清楚如何执行此操作。

fyi：共享对话框应该在同一页面上打开，当有人点击图标时，不应该将用户带到另一个页面。

这个页面上的facebook图标就是一个很好的例子： http ： //plnkr.co/

这是当前代码的插件 。

Answer 1

试试这个

.fb-share-button {
    opacity: 1;
    transform: scale(4.5);
    transform-origin: top left;
}

Answer 2

您可以自定义您的Facebook分享按钮（通过自己添加）并通过在CSS文件中添加以下代码来调整其大小

.FBConnectButton {
  height: 15px;
  float: left;
  background-position-y: -251px;
  background-position-x: -1px;
  border-bottom: 1px solid #1a356e;
   }
 .FBConnectButton_Text {
  font-size: 8px ;
  height: 9px;
    }
 .fb_share_count_inner {
 height: 9px;
 position: relative;
  }
.fb_share_count .fb_share_count_right {
float: left;
 }

这将解决您的问题只需在上面的代码中输入按钮的高度/字体大小和位置。 这个论坛上已经有很少的答案，他们可能会有所帮助

链接1

链接2