SNSアイコンのカスタマイズ

さっくり作ってみました。シェアボタンの部分だけですけれども。
横から出てくる奴は、htmlの構造が分かればすぐ作れます。自分のサイトで試せば出せるんですが、面倒なのでどこかで縦のシェアボタンが表示しているサイトがあればアドレスを提示下さい。
縦のは基本画面左辺に沿ってますが、これを#mainに沿わせることも可能です。また表示領域をfooterまでなどすることもできます。というかできる事を書いていったらきりがないので、リクエストがあれば何かしらやってみます。

サンプル: シェアボタン レスポンシブ フラット化 | codepen

サンプルはレスポンシブの確認用に仮のメディアクエリが#body-inに入ってます。スクリプトとリザルトの境界のバーを左右に動かすことでレスポンシブの確認もしてもらえます。

PC時(#mainの幅がデフォルトの場合)、最大で5つ並ぶようにしてあります。
タブレットというより、デカイスマホぐらいですけれども768pxの時は3つ、スマホサイズぐらいになると2列になります。サンプルでは、アイコンが表示されてませんが、これは利用されているwebフォントがfont-awesomeではないからです。
1つだけtwitterのアイコンが出てますが、これは別途公式のシェアボタンのリストに僕が追加したものです。これはfont-awesomeで表示されています。はてブやlineなどfont-awesomeにはないものはわいひらさん作です。

これら表示されていないものでも基本twitterの追加したものと同様に表示されると思いますが(試してないのでわかりません(笑))、最悪font-sizeをイジって下さい。縦中央、ボックスセンタリング、アイコンとカウントの吹き出し間のスペースは10pxと、これらは自動でそうなってます。
.balloon-btn-setのflexプロパティ、align-items:centerがそれです。

アイコンとカウントの吹き出しの間のスペースは.arrow-boxのmargin-leftで調整できます。

もしアイコンのサイズが合わないという場合は個別に修正もできます。が、その際は、font-awesomeが何px、その他のアイコンが何pxと指定して下さい。

マウスオーバーした時に、ほんのり縁取りが出るようにしていますが、これらを変更することも可能です。

またjQueryを使用すれば、liの範囲のどこをクリックしても本来のアイコンとカウントの吹き出しにかかっているリンク同様の動作をすることもできます。

わひらさん、まさにそのツールでの実装でした・・・前者はよく調べればわかったことで大変お手数おかけしてすみませんでした。
ただツールに頼ると先々そのサービスがなくなった時には困るので、Hidekichiさんに教えていただいた方法でなんとか実装できるかどうか試してみたいと思います。
また行き詰ったときに質問させていただきます。
このようなアイコン実装も将来的にオプションであると嬉しいです。