フォントアイコンの基本的な使い方－サイズ、色の変更－

2017年9月29日2020年2月22日フォントアイコンを活用しよう！

Font Awesomeバージョン4.7のものです。2017年末に新しくバージョン5が公開しています。
バージョン4.7と5は内容が異なるため、バージョン5は追々解説します。

フォントアイコンの基本的な使い方をコードと合わせて紹介します。

フォントアイコンを単発で文章の冒頭に付ける

　車でのアクセスはこちら

<i class="fa fa-car" aria-hidden="true"></i>

フォントアイコンを大きくする

クラス名に「fa-lg」などを追加で大きさが変化します。
fa-lg

<i class="fa fa-car fa-lg" aria-hidden="true"></i>

fa-2x

<i class="fa fa-car fa-2x" aria-hidden="true"></i>

fa-5x

<i class="fa fa-car fa-5x" aria-hidden="true"></i>

フォントアイコンに色を付ける

「style="color: red;"」という感じでCSSを追加します。単発ではコードに直接追加すればOK。複数の場所に使用する場合は、CSSファイルに追加します。

<i class="fa fa-car fa-5x" style="color: red;" aria-hidden="true"></i>

フォントアイコンを回転させる

「fa-spin」をクラス名に追加すると、フォントアイコンが回転します。

<i class="fa fa-car fa-5x fa-spin" style="color: red;" aria-hidden="true"></i>

フォントアイコンの角度を変える

「fa-rotate-90」をクラス名に追加すると、フォントアイコンの角度を変化させることができます。
数字のところが角度の値です。

<i class="fa fa-car fa-5x fa-rotate-90" style="color: red;" aria-hidden="true"></i>