beforeに入れたFontAwesome(v5.7)をrotateさせる

自分用のメモに近いものですが、役に立つことがあれば嬉しいです。

実行環境:

  • Font Awesome version5.7

before要素にFontAwesomeを入れるのは簡単。

before要素にFontAwesomeを入れるのは以下のような形で簡単にできます。

以下はFontAwesomeのversion5.7のfa-phoneに該当するアイコンフォントをbefore要素に入れています。

.phone-number:before {
  position: absolute;
  left: 0;
  font-family: "Font Awesome 5 Free";
  content: "\f095";
}

ただこの受話器のアイコンを逆方向に向かせたい。と思った時にちょっとハマりました。

before要素に入れたFont Awesomeを回転させる。

まずは以下の様にこれで動くだろうということでrotateさせました。

a.phone-number {
  /*電話番号の装飾*/
}
a.phone-number:before {
  font-family: "Font Awesome 5 Free";
  content: "\f095";
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(90deg);
}

これで動くだろうと思いましたが、動かず。。色々と調査してみてもbefore要素にrotateが効かないという情報も特に見当たらず、おもむろにpositionを入れてみました。

a.phone-number {
  /* 電話番号の装飾 */
  position: relative;
}
a.phone-number:before {
  position: absolute;
  left: 0;
  font-family: "Font Awesome 5 Free";
  content: "\f095";
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

上記の様にしたら簡単に動きました。もう一つ以下でも動きました。

a.phone-number {
  /* 電話番号の装飾 */
}
a.phone-number:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  content: "\f095";
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

つまりインライン要素がダメなのか。。

どこかでrotateがインライン要素も効くと見かけてしまい勘違いしているという落ちでした。