記事下の「この記事を書いた人」にオリジナルのボタンを追加する方法

お世話になっております。
以下のようなコードを子テーマのfunctions.phpに追加することで、この記事を書いた人のアイコンボタンを増やすことができます。

▼ Filmarksと小説家になろうのボタンを増やす例

function insert_author_info()
{
  $author_descr = get_the_author_meta('description');
  // プロフィール情報が空欄のときは表示しない
  if (empty($author_descr)) return;
?>
  <div class="author-info pastel-bc">
    <div class="author-info__inner">
      <div class="tb">
        <div class="tb-left">
        <div class="author_label">
          <span>この記事を書いた人</span>
        </div>
        <div class="author_img"><?php 
          $iconimg = get_avatar(get_the_author_meta('ID'), 100);
          if($iconimg) echo $iconimg; ?></div>
          <dl class="aut">
            <dt>
              <a class="dfont" href="<?php echo esc_url(get_author_posts_url(get_the_author_meta('ID'))); ?>">
                <span><?php esc_attr(the_author_meta('display_name')); //名前 ?></span>
              </a>
            </dt>
            <dd><?php esc_attr(the_author_meta('yourtitle'));?></dd>
          </dl>
        </div>
        <div class="tb-right">
          <p><?php the_author_meta('user_description'); //プロフィール文 ?></p>
          <div class="follow_btn dfont">
          <?php
            $socials = array(
              'Twitter' => esc_attr(get_the_author_meta('twitter')),
              'Facebook' => esc_url(get_the_author_meta('facebook')),
              'Instagram' => esc_url(get_the_author_meta('instagram')),
              'Feedly' => esc_url(get_the_author_meta('feedly')),
              'LINE' => esc_url(get_the_author_meta('line')),
              'YouTube' => esc_url(get_the_author_meta('youtube')),
              'Website' => esc_url(get_the_author_meta('url')),
            );
            foreach ($socials as $name => $url) {
              if ($url) { ?>
                <a class="<?php echo $name; ?>" href="<?php echo esc_url($url); ?>" target="_blank" rel="nofollow noopener noreferrer"><?php echo esc_attr($name); ?></a>
        <?php }
            }?>
              <!-- ここにオリジナルリンクを追加 -->
              <a class="Website Website--filmarks" href="★URLをここに★" target="_blank" rel="nofollow noopener noreferrer">Filmarks</a>
              <a class="Website Website--narou" href="<★URLをここに★" target="_blank" rel="nofollow noopener noreferrer">小説家になろう</a>
              <style>
              /* このCSSは追加CSSなどに貼り付けてもOK。その場合はstyleタグは除く */
              .follow_btn .Website--filmarks:before {
                content: '\f03d'; /* FontAwesome5のアイコンコード */
                background-color: #f7e300; /* 背景色 */
              }
              .follow_btn .Website--narou:before {
                content: '\f303'; /* FontAwesome5のアイコンコード */
                background-color: #555555; /* 背景色 */
              }
              </style>
          </div>
        </div>
      </div>
    </div>
  </div>
<?php }

↑まるっと貼り付けた後に「ここにオリジナルリンクを追加」という部分をお好みで編集します。
ちなみにWebsite--filmarksなどのクラス名は変えてもOKです。
よろしくお願いします。

なんどもすいません。
小説家になろうのボタンだけ余白が大きくなってしまったため、letter-spacing: -0.1emで「小説家になろう」の字の間を縮めて均等になるように調整したいと思ったのですがうまくできません。対処方法がありましたら教えていただけると幸いです。テーマに 関係ないことで申し訳ありません。

早速ありがとうございます！
うまく表示することができました。とてもうれしいです。
細かいコードまで教えてくださりありがとうございます。

今後表示するボタンを増やしたい場合、

<a class="Website Website--filmarks" href="★URLをここに★" target="_blank" rel="nofollow noopener noreferrer">Filmarks</a>

と
.follow_btn .Website–filmarks:before {
content: ‘\f03d’; /* FontAwesome5のアイコンコード */
background-color: #f7e300; /* 背景色 */
}
の2箇所のコードをクラス名とURL、アイコンなどを変更して追記すればよいでしょうか。

その場合、以下のようなCSSでテキストのスタイルを変えることができます。

.follow_btn .Website--narou {
    letter-spacing: -0.1em;
    font-size: 10px;
}

もしくは、「小説家になろう」の前のアイコンである「Filmarks」の右の余白を小さくするという手があります。

.follow_btn .Website--filmarks {
    margin-right: 1px;
}

アイコンの増やし方についてはおっしゃるとおりです。
よろしくお願いします。

詳しく教えてくださりありがとうございます！
ちょうどよいサイズに修正できました。