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