Font Awesomeのアイコンを回転させて角度を変更する方法
コーポレートサイトを作成する際、上記のような電話のFont Awesomeのアイコンを使用することが多いと思います。
しかし、デフォルトのFont Awesomeのアイコンは左側の画像しかなく、右側のようなアイコンにするにはアイコンを回転させなければいけません。
そこで簡単に（決まった角度に）回転させる方法とそれ以外の角度を指定する方法をご紹介します。
45度・135度・225度・315度に傾ける方法
<!-- 90度傾ける -->
<i class="fa-solid fa-phone fa-rotate-90"></i>
<!-- 180度傾ける -->
<i class="fa-solid fa-phone fa-rotate-180"></i>
<!-- 270度傾ける -->
<i class="fa-solid fa-phone fa-rotate-270"></i>
<!-- 水平に反転 -->
<i class="fa-solid fa-phone fa-flip-horizontal"></i>
<!-- 垂直に反転 -->
<i class="fa-solid fa-phone fa-flip-vertical"></i>
<!-- 水平かつ垂直に反転 -->
<i class="fa-solid fa-phone fa-flip-both"></i>上記のように、Font Awesomeのコードに直接クラスを振ると、CSSでスタイルを当てなくても簡単に実装することができます。
それ以外の角度（45度・135度・225度・315度など）
/* 45度傾ける */
.fa-phone{
transform: rotate(45deg);
}
/* 135度傾ける */
.fa-phone{
transform: rotate(135deg);
}
/* 225度傾ける */
.fa-phone{
transform: rotate(225deg);
}
/*315度傾ける */
.fa-phone{
transform: rotate(315deg);
}その他の角度にFont Awesomeのアイコンを傾けたいときは、
transform: rotate(45deg);のようにtransformのrotateプロパティを使用すれば実装できます。
transformはrotate以外にもtranslateやskew、scaleaなど、使い勝手の良いプロパティがたくさんあるので、実践でどんどん使っていきましょう！
その他の記事は下記のリンクから飛べるので是非参考にしてみてください。
【HTML+CSS】transform: scale();を使えば画像や要素を簡単に反転させられる
【HTML+CSS】positionより簡単に要素の位置移動ができるtransform: translate();の使い方