如何更改 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/

这是当前代码的plunk。

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

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

Link 1

Link 2