FontAwesomeカスタム！アイコンサイズを変更したり回転させたり… FontAwesomeの加工方法とサンプル集。

Web上でアイコン表示するのに便利なFontAwesomeはWebフォントなので加工が可能です。

FontAwesomeで使用するアイコンには一意のClass名が振られているため、CSSでいろいろ調整することも可能ですが、アイコンサイズの変更などは専用のプレフィックスを記述するだけで行うことができます。

アイコンを表示させる際のHTMLの記述を少し変更するだけで様々なカスタムができる為、アイコン用のCSSを追加する必要がなくなります。

FontAweome4で説明していますが、FontAwesome5でも同じです。

この記事の目次

FontAwesomeアイコンの加工・カスタマイズ

ここで紹介している各クラスは半角スペースで区切って使用することができます。

（例）

こんな感じです。

「fa-3x」で3倍の大きさで表示。
「fa-rotate-90」で90度回転して表示。

色々併用することで面白いアイコンが出来上がりますね！
更にcssでも調整できるのでFontAwesomeのカスタム性はほぼ無限大。

では早速、基本的な加工方法を順番に見ていきましょう。

まず、FontAwesomeのアイコンサイズを変更する方法です。
12種類のクラスが用意されているため、12段階でアイコンの大きさを変更することができます。

【使用例】

fa-3x : 3em = 3倍です。

ピクセル単位で指定したい時はCSSでfont-sizeプロパティを使用します。
■HTMLに直接記述する場合↓

<i class="fa fa-camera" style="font-size:50px;"></i>

■CSSファイルに記述する場合↓

.fa-camera:before {
    content: "\f030";
    font-size: 50px;
}

contentの中の「\f030」はカメラのUnicodeと呼ばれるものです。
アイコンごとに存在し、CSSで疑似要素を装飾するのに必要です。

表示結果

お察しの方が多いと思いますが、CSSが使えるので色の変更も簡単です。
■HTMLに直接記述する場合↓

<i class="fa fa-camera" style="color:red;"></i>

■CSSファイルに記述する場合↓

.fa-camera:before {
    content: "\f030";
    color: red;
}

表示結果

アイコンに背景色を設定する

色の指定はアイコン色だけでなく、背景色の指定も可能です。
■HTMLに直接記述する場合↓

<i class="fa fa-camera" style="background:red"></i>

■CSSファイルに記述する場合↓

.fa-camera:before {
    content: "\f030";
    background: red;
}

表示結果

【使用例】

横に広いアイコンと、横に狭いアイコンを垂直方向に並べて使用する場合。

｜
｜
｜

のように横幅がズレてしまいますが、揃えることが出来ます。
上記のすべてのアイコンに「fa-fw」を指定します。

表示結果
｜
｜
｜

このようにアイコンの横幅を綺麗に揃えることが出来ます。

FontAwesomeはリストの・などをアイコンに置き換えて使用することも出来ます。

「ul」タグのクラス名に「fa-ul」を、
「li」タグのクラス名に「fa-li」を使用する。

【使用例】
<ul class="fa-ul">
<li>１</li>
<li>２</li>
<li>３</li>
</ul>

表示結果

FontAwesomeのアイコンは90度、180度、270度と回転させたり、水平方向や垂直方向に反転させることもできます。

【使用例】