Fontawesomeを使ったiconは便利ですよね、ただシンプルなので味気ない気もします。
今回はちょっとアレンジしたいと思います！

前提

HTML
CSS
Fontawesome（CDN）
Bootstrap (CDN)

だけで実装可能です！

　実装

まずはHTMLファイルのheadに以下のコードを追加してください

index.css

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">

これでFontawesomeとBootstrapが使えます。

使用アイコン

以下のように描くことでTwitterとInstagramのアイコンが使えます

index.css

<i class="fab fa-twitter fa-3x"></i>
<i class="fab fa-instagram fa-3x"></i>
/*-「fa-3x」と書いているのはサイズを大きくしているからです。消してもらっても構いません-*/

これでアイコンの実装が完了しました。
少しアレンジしていきたいと思います。

index.html

  <div class="row text-center mt-5 pt-5">
    <div class="col-6 mb-3"><a href="#" class="tweet"><i class="fab fa-twitter fa-3x"></i></a></div>
    <div class="col-6 mb-3"><a href="#" class="insta"><i class="fab fa-instagram fa-3x"></i></a></div>
  </div>

＊ここで使っているbootstrapのクラスについて説明します
row: 画面を12分割する
mt, pt: margin-top, padding-topのことです。 1 ~ 5まで指定できます。
text-center: text-align: center;と同じ
col-6: rowと合わせて使うことで12分割したうちの6カラム使用するとなります。
mb-3: margin-bottomのことです。1 ~ 5まで指定できます。

アイコンだけだと味気ないので、枠に入れたいと思います。

index.css

.tweet{
  text-decoration: none;　/*--aで括っているのでリンクの下線などを消すために設定しています--*/
  color: black;
}

.tweet i{
  border: 2px solid black;
  border-radius: 50%; /*--ここで丸くしています-*/
  padding: 10px;

ちょっとだけ見やすくなりましたね！
色も変えちゃいましょう

index.css

.tweet{
  text-decoration: none;
  color: white;
}

.tweet i{
  border: 2px solid white;
  border-radius: 50%;
  padding: 10px;
  background-color: skyblue;
}

twitterっぽくなりました！

最後に一工夫です。
このアイコンにカーソルが乗った場合に変化させましょう！

index.css

.tweet{
  text-decoration: none;
  color: white;
  transition: all 0.3s ease;
}

.tweet:hover{
  color: blue;
}

.tweet i{
  border: 2px solid white;
  border-radius: 50%;
  padding: 10px;
  background-color: skyblue;
  transition: all 0.5s ease;
}

.tweet i:hover{
  border-radius: 0;
  transform: rotate(360deg);
  background-color: white;
  border: 2px solid skyblue;
}

/*----- インスタグラム ------*/
.insta i{
  border: 2px solid red;
  border-radius: 50%;
  padding: 10px;
  cursor: pointer;
  transition: all 0.5s ease;
  background-color: white;
}

.insta i:hover{
  border-radius: 0;
  transform: rotate(360deg);
  background-color: red;
  border: 2px solid red;
}

.insta{
  text-decoration: none;
  color: red;
  transition: all 0.3s ease;
}

.insta:hover{
  color: white;
}

transitionをhoverさせたい要素に加えることでhoverした時のcssが適用されるまでの時間や動きかたを変更できます。
tweetの例で見ると、0.3秒かけてゆっくり変化させています。

transition: all 0.3s ease;
all => どのプロパティに適用するか
0.3s => 「s」か「ms」として指定できます
ease => 動きかたの指定

以上で実装をおわります！

注意点としては、transformの指定は"a"タグや"span"タグに対しては指定できないみたいなので注意してください！

hoverで変化するsns共有ボタン

前提

実装

使用アイコン

アイコンだけだと味気ないので、枠に入れたいと思います。

以上で実装をおわります！

　実装