Font Awesome フォントの重ね方メモ

<!--FontAwesomeを読み込みます。-->
<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

<!--リンクを付与-->
<a href="#" style="text-decoration-line: none;">
  <!--　複数のアイコンを重ねるためにfa-stackクラスを使用して重ねたいアイコンを囲みます　-->
  <span class="fa-stack fa-lg">
    <!--丸いアイコンにメールアイコンを重ねます
    fa-stack-2xクラスは重ねたときに大きく表示されるアイコンに使用します。
    今回は丸いアイコンに影をつけているので、style属性により
    filter:drop-shadowを使用しています。
    カッコの中は(offset-x (必須):水平方向の距離 offset-y (必須):垂直方向の距離 
    blur-radius (任意)：影をぼかす半径 color (任意))です。
    -->
    <i class="fa fa-circle fa-stack-2x" style="color: white; filter:drop-shadow(2px 2px 4px #bbb);"></i>
    <!--fa-stack-1xクラスは重ねたときに基本サイズで表示されるアイコンに使用します。
    -->
    <i class="fa-regular fa-envelope fa-stack-1x" style="color: black;"></i>
  </span>
</a>
<a href="#" style="text-decoration-line: none;">
  <span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x" style="color: white; filter:drop-shadow(2px 2px 4px #bbb);"></i>
    <!--電話の形のアイコン-->
    <i class="fa-solid fa-phone fa-stack-1x" style="color: black;"></i>
  </span>
</a>
<a href="#" style="text-decoration-line: none;">
  <span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x" style="color: white; filter:drop-shadow(2px 2px 4px #bbb);"></i>
    <!--Twitterのアイコン-->
    <i class="fa-brands fa-twitter fa-stack-1x" style="color: black;"></i>
  </span>
</a>
<a href="#" style="text-decoration-line: none;">
  <span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x" style="color: white; filter:drop-shadow(2px 2px 4px #bbb);"></i>
    <!--Facebookのアイコン-->
    <i class="fa-brands fa-facebook-f fa-stack-1x" style="color: black;"></i>
  </span>
</a>