FontAwesomeのアイコンの大きさを変更する方法！

クラスを追加してアイコンの大きさを変更する方法を解説します。

FontAwesomeには追加するだけでアイコンを変更できる便利なクラス名があります。アイコンのサイズを変更してくれるクラスは以下の通りです。

このクラスを追加することによってアイコンの大きさが変わっていることを確認してください。

クラスを追加することでアイコンの大きさが変わっていることを確認できました。

しかし「7倍よりも大きくしたい」「もっと細かく調整したい」といった要望もあると思います。

その場合に対処できる方法を次で解説します。

次はCSSでスタイルを指定する方法を解説します。この方法では、普段の文字のサイズの変更と同様にfont-sizeプロパティで指定して大きさを変更します。

この方法ではpx単位での変更が可能なため細かい調整が可能です。

上記のような「font-sizeプロパティで指定したけどCSSが反映されてない…」といった場合の対処法を解説します。

FontAwesomeでは大きさをクラスで指定する方法とCSSで指定する2つの方法を同時に行った場合クラスで指定した大きさが優先されるという特徴があります。

CSSを反映させたい場合はクラスを取り除くようにしてください。

またそれでもだめな場合はCSSの文法ミスや他のスタイルによる上書きの可能性もあります。下記を参考にしてみましょう。