Bootstrapと Fontawesome で綺麗なLINEアイコンを作る

プロローグ

アプリ版Noteのフローティングアイコンの様に，綺麗なLINEアイコンを作りたい！
と思った場合，Twiterアイコンのようには単純には作れなかったので以下にソースコードを共有します．

完成イメージ

ちなみに完成図は以下，

完成リンクは以下．

ソースコード

参考までに，Twitterアイコン用のソースコード量よりもLINEアイコン用ソースコードの方が多いことが見て取れます！

<div class="fixed-action-btn position-fixed bottom-0 start-0 " style="height: 65px; width: 185px;">
  <section class="text-center">
    <!-- twitter share -->
    <button class="btn btn-floating btn-dark btn-lg ripple-surface" style="min-width: 45px; background-color:#1DA1F2"
      type="button" onclick="share2Twitter()">
      <i class="fab fa-twitter fa-lg"></i>
    </button>
    <!-- line share -->
    <button class="btn btn-floating btn-dark btn-lg ripple-surface" style="min-width: 45px; background-color:#00B900"
      type="button" onclick="share2Line()">
      <i class="fas fa-circle fa-lg" style="color: #ffffff;"></i>
      <i class="fab fa-line fa-2x" style="color: #00B900;position:relative; top: -45px;"></i>
    </button>
    <!-- web share api-->
    <button class="btn btn-floating btn-light btn-lg ripple-surface" style="min-width: 45px; background-color:#ffffff"
      type="button" onclick="share()">
      <i class="fas fa-share-alt"></i>
    </button>
  </section>
  <!-- Menu button -->
</div>

おしまい

終わり