[CSS] FontAwesomeのアイコンを左右反転したい

公開日:2019/03/21

フォントアイコンといえばフォントオーサム、いつもお世話になっております
アイコンを使っていると、たまに「このアイコンを左右反転したい」ということがあります
例えば電話の受話器アイコンなんかは、続けて電話番号を書くなら左右逆の方がしっくりきます（※個人の見解です）
このようなアイコンの向きをひっくり返す処理もたった数行のコードで解決できます

サンプルコード

html

<p class="tel_num">0123-45-6789</p>

CSS

.tel_num::before {
    display: inline-block;
    transform: scaleX(-1);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "f095";
}

「transform: scaleX(-1);」がポイントです
要素の拡縮に使用するプロパティですが、負数指定することで向きをひっくり返して反転することができます
縮めて縮めて抑圧された結果グレてしまったといった感じでしょうか
で、忘れがちなのが「display: inline-block;」
インライン要素はtransformできないため、インラインブロックにしてあげる必要があります。
意外と忘れがちなポイントなので、「transform: scaleX(-1);にしても反転しない」といったときは気にかけてみてください

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。