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

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

2 个答案: