Blog

【コピペでOK】Font Awesomeを斜め（45度・135度・225度・315度）に傾ける方法

2019.09.26 コーディング

とある案件でFont Awesomeの受話器を傾ける必要があり、方法を調べたのでメモします。

Font Awesomeにはもともとアイコンを傾けるためのクラスが用意されていて、

  • 90度傾ける
  • 180度傾ける
  • 270度傾ける
  • 水平に反転
  • 垂直に反転
  • 水平かつ垂直に反転

の6パターンは、以下のようにクラスを付与すれば大丈夫です。

HTML
<!-- 90度傾ける -->
<i class="fas fa-snowboarding fa-rotate-90"></i>

<!-- 180度傾ける -->
<i class="fas fa-snowboarding fa-rotate-180"></i>

<!-- 270度傾ける -->
<i class="fas fa-snowboarding fa-rotate-270"></i>

<!-- 水平に反転 -->
<i class="fas fa-snowboarding fa-flip-horizontal"></i>

<!-- 垂直に反転 -->
<i class="fas fa-snowboarding fa-flip-vertical"></i>

<!-- 水平かつ垂直に反転 -->
<i class="fas fa-snowboarding fa-flip-both"></i>

Font Awesomeを斜め（45度・135度・225度・315度）に傾ける方法

しかし、それ以外の角度に傾けたい（回転させたい）場合は、独自でCSSを用意する必要があります。

Stack Overflowを参考に、45度・135度・225度・315度それぞれの記述例をご紹介します。

CSS
/* 45度傾けるクラス */
.fa-rotate-45 {
	transform: rotate(45deg);
}

/* 135度傾けるクラス */
.fa-rotate-135 {
	transform: rotate(135deg);
}

/* 225度傾けるクラス */
.fa-rotate-225 {
	transform: rotate(225deg);
}

/* 315度傾けるクラス */
.fa-rotate-315 {
	transform: rotate(315deg);
}
HTML
<!-- 45度傾ける -->
<i class="fas fa-snowboarding fa-rotate-45"></i>

<!-- 135度傾ける -->
<i class="fas fa-snowboarding fa-rotate-135"></i>

<!-- 225度傾ける -->
<i class="fas fa-snowboarding fa-rotate-225"></i>

<!-- 315度傾ける -->
<i class="fas fa-snowboarding fa-rotate-315"></i>

なおStack Overflowで紹介されているソースコードにはベンダープレフィックスが付いていますが、Can I useを見た感じ現在は必要ないようです。