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

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

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

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

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

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

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

(例)<i class="fa fa-camera fa-3x fa-rotate-90"></i>
こんな感じです。

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

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

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

アイコンの大きさ(サイズ)を変更する

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

【使用例】
<i class="fa fa-camera fa-3x"></i>
fa-3x : 3em = 3倍です。
クラス名サイズ表示結果
fa-xs0.75em
fa-sm0.875em
fa-lg1.33em
fa-2x2em
fa-3x3em
fa-4x4em
fa-5x5em
fa-6x6em省略
fa-7x7em省略
fa-8x8em省略
fa-9x9em省略
fa-10x10em省略

ピクセル単位で指定したい時は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;
}
表示結果

縦に並ぶアイコンの横幅を揃える

【使用例】
<i class="fa fa-camera fa-fw"></i>

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



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

表示結果


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

アイコンをリストで使う

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

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

【使用例】
<ul class="fa-ul">
<li><span class="fa-li"><i class="fa fa-hand-o-right"></i></span>1</li>
<li><span class="fa-li"><i class="fa fa-hand-peace-o"></i></span>2</li>
<li><span class="fa-li"><i class="fa fa-hand-spock-o"></i></span>3</li>
</ul>
表示結果

アイコンを回転させる

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

【使用例】
<i class="fa fa-motorcycle fa-rotate-90"></i>
クラス名回転・反転表示結果
fa-rotate-9090°回転
fa-rotate-180180°回転
fa-rotate-270270°回転
fa-flip-horizontal水平方向に反転
fa-flip-vertical垂直方向に反転
fa-flip-both水平、垂直の両方向に反転5.7.0以降のみ対応

アイコンに回転アニメーションを付ける

「fa-spin」及び「fa-pulse」クラスを使えば、
リロード時にぐるぐる回るアニメーションをアイコンにつけることが出来ます。

【使用例】
<i class="fa fa-camera fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>
クラス名仕様表示結果
fa-spinアイコンを回転させる
fa-spinner fa-pulse8ステップで回転させる
8ステップ回転はスピナーカテゴリーのアイテムしか動作しないようです。
【公式:スピナーアイコン一覧】Spinner Icons | Font Awesome

アイコンにボーダー線を付ける

アイコンの周りを囲う線を付けることが出来ます。

【使用例】
<i class="fa fa-camera fa-border"></i>
表示結果

(確認しにくいので拡大表示しています。)

アイコンを回り込み(float)表示する

アイコンの左右にテキストなどを回り込んで表示させることが出来ます。
fa-pull-right:float:right
fa-pull-left:float:left
といった感じになりました。

【使用例】
<i class="fa fa-camera fa-pull-right"></i>テストテスト・・・テスト。
<i class="fa fa-camera fa-pull-left"></i>テストテスト・・・テスト。

fa-pull-rightの表示結果

テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト。

fa-pull-leftの表示結果

テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト。

アイコンを重ねて表示する

何かのアイコンに✕マークを入れたい場合などに便利。

アイコンの親要素(span要素)に「fa-stack」というクラスを追加。
重ねられるアイコンに「fa-stack-1x」というクラスを追加。
重ねるアイコンに「fa-stack-2x」というクラスを追加。

【使用例】
<span class="fa-stack">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x" style="color:red"></i>
</span>
WordPressなどでは使用例をコピペしてもダメです。
<span>タグで囲っているので改行無しで記述するとうまくいきました。
表示結果

更に「fa-stack-1x」を追加したアイコンに「fa-inverse」というクラスを追加すると色が反転します。

【使用例】
<span class="fa-stack">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
表示結果(fa-inberseあり)
表示結果(fa-inberseなし)

色の反転をかけないと真っ黒になって重なっていても分かりませんね。

親要素に「fa-lg」や「fa-5x」など大きさの指定をしてあげると両方のサイズが大きくなります。

まとめ

全部ではありませんがFontAwesomeのカスタム方法と実際のサンプルのまとめでした。

時間があるときに他のカスタム内容も追記していこうと思います。

この記事はFontAwesomeの公式ページを参考に作成しました。

【参考】Sizing Icons | Font Awesome
公式ページの「Docs」のページをめくっていくと詳しく見ることが出来ます。
(英語なのがかなり厳しい…)

-サイト構築
-

© 2021 ソロ学