ウェブアイコン「Font Awesome」『Version 6』の紹介
ウェブアイコン「Font Awesome」の『Version 6』が2022年２月にリリースされたのでそれを紹介したいと思います。
ウェブアイコン「Font Awesome」『Version 6』の導入方法
導入方法
ダウンロードする場合
まず、「Font Awesome」のページに行って、「Sign In」してください。
メールアドレスとパスワードを入れて、サインインしてください。
まだ、アカウントを保持されていない場合には『Create a Free Font Awesome Account』をクリックして、アカウントを作成してください。
サインイン後、トップページに戻ると「Download」ボタンが現れるので、押してください。
「6.0.0 For The Web」の『Free For Web』をクリックすると、Font Awesomeを利用するためのライブラリ一式をZIP形式の書庫ファイルをダウンロードすることができます。
CSSファイルインクルード
ダウンロードした書庫ファイルにある「css」の直下にある『all.css』ファイルを読み込んでください。
これで準備完了です。
<link href="/assets/fontawesome-free-6.0.0-web/css/all.css" rel="stylesheet">
Your Kitsを利用する場合
「Font Awesome」のサーバ側で提供するライブラリをそのまま利用することもできます。
まず、サインイン後、トップページの『Your Kits』をクリックしてください。
「Your Kits」のページが開くと次に歯車アイコン（Settings）をクリックしてください。
Versionが『Latest 5.x』となっていた場合には、『Latest 6.x』に変えてください。
変更後、『Save Changes』をクリックして変更の保存をしてください。
変更後、『Changes Saved!』とのメッセージが表示され、少し時間をおいてから、変更が有効になるようです。
次に、『How to Use』をクリックしてください。
すると、scriptタグのコードを取得できるので『Copy Kit Code』をクリックしてコードをコピーしてください。
このコードをコピーして、HTMLのソースにコピーするとセットアップ完了です。
<script src="https://kit.fontawesome.com/xxxxxxxxx.js" crossorigin="anonymous"></script>利用方法
HTMLマークアップ
<!-- solid style -->
<i class="fa-solid fa-user"></i>
<!-- regular style -->
<i class="fa-regular fa-user"></i>
<!-- light style [Proのみ]-->
<i class="fa-light fa-user"></i>
<!-- duotone style [Proのみ]-->
<i class="fa-duotone fa-user"></i>
<!-- all new thin style [Proのみ] -->
<i class="fa-thin fa-user"></i>
<!--brand icon-->
<i class="fa-brands fa-github-square"></i><i>タグを書いて、classに利用したいスタイルのクラスとアイコンのクラスを指定してください。
「Font Awesome」『Version 6』のアイコン紹介
アイコン数
- アイコン数（プロ版）：14,865
- アイコン数（無料版）：1,748
- カテゴリー数：66
- スタイル数：5
スタイル
- Solid
- Regular
- Light（プロ版のみ）
- Thin（プロ版のみ）
- Duotone（プロ版のみ）
加えて、Brands（ブランド）アイコンがあります。
ただ、無料版とプロ版で利用できるスタイルにかなり制限があります。
アイコンのスタイリング
基本形
<span style="font-size: 3em; color: Tomato;">
<i class="fas fa-camera"></i>
</span>
<span style="font-size: 48px; color: Dodgerblue;">
<i class="fas fa-camera"></i>
</span>
<span style="font-size: 3rem;">
<span style="color: Mediumslateblue;">
<i class="fas fa-camera"></i>
</span>
</span>style属性を設定することでアイコンの大きさや色などを変更できます。
アイコンのサイズ指定
相対サイズ
Font Awesomeでは以下のようなクラスがあり、サイズを変更することができます。
なお、フォントサイズはピクセル単位での大きさの一覧は以下のようになります。
| クラス | フォントサイズ | ピクセル |
| fa-2xs | 0.625em | 10px |
| fa-xs | 0.75em | 12px |
| fa-sm | 0.875em | 14px |
| （無し） | 1em | 16px |
| fa-lg | 1.25em | 20px |
| fa-xl | 1.5em | 24px |
| fa-2xl | 2em | 32px |
fa-2xs
fa-xs
fa-sm
（なし）
fa-lg
fa-xl
fa-2xl
<p><i class="fa-solid fa-coffee fa-2xs"></i> fa-2xs</p>
<p><i class="fa-solid fa-coffee fa-xs"></i> fa-xs</p>
<p><i class="fa-solid fa-coffee fa-sm"></i> fa-sm</p>
<p><i class="fa-solid fa-coffee"></i> （なし）</p>
<p><i class="fa-solid fa-coffee fa-lg"></i> fa-lg</p>
<p><i class="fa-solid fa-coffee fa-xl"></i> fa-xl</p>
<p><i class="fa-solid fa-coffee fa-2xl"></i> fa-2xl</p>文字通りの指定（リテラルサイジング）
以下のようなクラスが用意されていて１から10までのクラスが用意されています。
| クラス | フォントサイズ |
| fa-1x | 1em |
| fa-2x | 2em |
| fa-3x | 3em |
| fa-4x | 4em |
| fa-5x | 5em |
| fa-6x | 6em |
| fa-7x | 7em |
| fa-8x | 8em |
| fa-9x | 9em |
| fa-10x | 10em |
fa-1x
fa-2x
fa-3x
fa-4x
fa-5x
fa-6x
fa-7x
fa-8x
fa-9x
fa-10x
<p><i class="fa-solid fa-camera fa-1x"></i> fa-1x</p>
<p><i class="fa-solid fa-camera fa-2x"></i> fa-2x</p>
<p><i class="fa-solid fa-camera fa-3x"></i> fa-3x</p>
<p><i class="fa-solid fa-camera fa-4x"></i> fa-4x</p>
<p><i class="fa-solid fa-camera fa-5x"></i> fa-5x</p>
<p><i class="fa-solid fa-camera fa-6x"></i> fa-6x</p>
<p><i class="fa-solid fa-camera fa-7x"></i> fa-7x</p>
<p><i class="fa-solid fa-camera fa-8x"></i> fa-8x</p>
<p><i class="fa-solid fa-camera fa-9x"></i> fa-9x</p>
<p><i class="fa-solid fa-camera fa-10x"></i> fa-10x</p>固定幅アイコン
アイコンを固定幅にするにはclassに「fa-fw」を指定してください。
Skating
Skiing
Nordic Skiing
Snowboarding
Snowplow
<div style="font-size: 2rem;">
<div><i class="fa-solid fa-skating fa-fw" style="background:DodgerBlue"></i> Skating</div>
<div><i class="fa-solid fa-skiing fa-fw" style="background:SkyBlue"></i> Skiing</div>
<div><i class="fa-solid fa-skiing-nordic fa-fw" style="background:DodgerBlue"></i> Nordic Skiing</div>
<div><i class="fa-solid fa-snowboarding fa-fw" style="background:SkyBlue"></i> Snowboarding</div>
<div><i class="fa-solid fa-snowplow fa-fw" style="background:DodgerBlue"></i> Snowplow</div>
</div>「fa-fw」を指定しないと以下のようになってしまいます。
Skating
Skiing
Nordic Skiing
Snowboarding
Snowplow
リスト（<ul>や<li>）にアイコンを利用する
<ul>や<ol>にクラス『fa-ul』とリスト（<li>）に固定幅であるクラス『fa-li』を設定すると、リストのしるしにFont Awesomeのアイコンを利用できます。
| クラス | 説明 |
| fa-ul | ulタグやolタグに適用するクラス |
| fa-li | liタグに適用するクラス |
また、カスタムプロパティも用意されています。
| カスタムプロパティ | 説明 |
| –fa-li-width | アイコンの幅を指定できるプロパティ |
| –fa-li-margin | アイコンのマージンを指定できるプロパティ |
- 完了タスク１
- 完了タスク２
- 仕掛中
- 未着手
- 新規タスク
- 警告
<ul class="fa-ul">
<li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>完了タスク１</li>
<li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>完了タスク２</li>
<li><span class="fa-li"><i class="fa-solid fa-spinner fa-pulse"></i></span>仕掛中</li>
<li><span class="fa-li"><i class="fa-regular fa-square"></i></span>未着手</li>
<li><span class="fa-li" style="--fa-li-width: 4em;" ><i class="fa-solid fa-star"></i></span>新規タスク</li>
<li><span class="fa-li" style="--fa-li-margin: 2em;"><i class="fa-solid fa-triangle-exclamation"></i></span>警告</li>
</ul>アイコンの回転
以下のようなクラスを指定することで、アイコンを回転させることができます。
| クラス | |
| fa-rotate-90 | 90度アイコンを回転 |
| fa-rotate-180 | 180度アイコンを回転 |
| fa-rotate-270 | 270度アイコンを回転 |
| fa-flip-horizontal | 水平（左右）にアイコンを逆転させる |
| fa-flip-vertical | 垂直（上下）にアイコンを逆転させる |
| fa-flip-both | 垂直水平（上下左右）にアイコンを逆転させる |
| fa-rotate-by | CSSのプロパティ「–fa-rotate-angle」と同時に使用することで、 「–fa-rotate-angle」の指定度数分、回転させる |
<div class="fa-3x">
<i class="fa-solid fa-snowboarding"></i>
<i class="fa-solid fa-snowboarding fa-rotate-90"></i>
<i class="fa-solid fa-snowboarding fa-rotate-180"></i>
<i class="fa-solid fa-snowboarding fa-rotate-270"></i>
<i class="fa-solid fa-snowboarding fa-flip-horizontal"></i>
<i class="fa-solid fa-snowboarding fa-flip-vertical"></i>
<i class="fa-solid fa-snowboarding fa-flip-both"></i>
</div>
<div class="fa-3x">
<i class="fa-solid fa-snowboarding"></i>
<i class="fa-solid fa-snowboarding fa-rotate-by" style="--fa-rotate-angle: 45deg;"></i>
<i class="fa-solid fa-snowboarding fa-rotate-by" style="--fa-rotate-angle: -45deg;"></i>
<i class="fa-solid fa-snowboarding fa-rotate-by" style="--fa-rotate-angle: 19deg;"></i>
<i class="fa-solid fa-snowboarding fa-rotate-by" style="--fa-rotate-angle: 80deg;"></i>
<i class="fa-solid fa-snowboarding fa-rotate-by" style="--fa-rotate-angle: 0.25deg;"></i>
<i class="fa-solid fa-snowboarding fa-rotate-by" style="--fa-rotate-angle: -0.25deg;"></i>
</div>
アニメーション
Font Awesome ではアイコンに効果を加えることができます。
紹介していきましょう。
Beat（ビート）
| クラス | 説明 |
| fa-beat | 拡大縮小を繰り返す効果です |
Beatと同時に利用する効果のユティリティは以下の通りです。
| ユティリティ | 説明 |
| -fa-beat-scale | 拡大時のアイコンサイズを調整できます |
<div class="fa-3x">
<i class="fa-solid fa-circle-plus fa-beat"></i>
<i class="fa-solid fa-heart fa-beat"></i>
<i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 0.5s;" ></i>
<i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 2s;"></i>
<i class="fa-solid fa-heart fa-beat" style="--fa-beat-scale: 2.0;"></i>
</div>Fade（フェード）
| クラス | 説明 |
| fa-beat | アイコンの透明度が変わる効果です |
Fadeと同時に利用する効果のユティリティは以下の通りです。
| ユティリティ | 説明 |
| –fa-fade-opacity | 効果に適用できる透明度を指定できます（0.0～1.0） |
<div class="fa-3x">
<i class="fa-solid fa-triangle-exclamation fa-fade"></i>
<i class="fa-solid fa-skull-crossbones fa-fade"></i>
<i class="fa-solid fa-desktop fa-fade"></i>
<i class="fa-solid fa-i-cursor fa-fade" style="--fa-animation-duration: 2s; --fa-fade-opacity: 0.1;" ></i>
</div>Beat-Fade（ビートフェード）
BeatとFadeを合わせた効果となります。拡大縮小と視覚的にも薄くなったり濃くなったりする効果です。
| クラス | 説明 |
| fa-beat-fade | 拡大縮小をしつつ透明度が変化する効果です。 |
Beat-Fadeと同時に利用する効果のユティリティは以下の通りです。
| ユティリティ | 説明 |
| –fa-beat-fade-opacity | 効果に適用できる透明度を指定できます（0.0～1.0） |
| –fa-beat-fade-scale | 拡大時のアイコンサイズを調整できます |
Bounce（バウンス）
アイコンを弾ませる効果です。
| クラス | 説明 |
| fa-bounce | アイコンを弾ませる効果です |
Bounceと同時に利用する効果のユティリティは以下の通りです。
| ユティリティ | 説明 |
| –fa-bounce-rebound | 着地後、再バウンドの程度を指定できます。 |
| –fa-bounce-height, | バウンドの高さを指定できます。 |
| –fa-bounce-start-scale-x | バウンド開始時の横のゆがみの程度を指定できます |
| –fa-bounce-start-scale-y | バウンド開始時の縦のゆがみの程度を指定できます |
| -fa-bounce-jump-scale-x | ジャンプ時の横のゆがみの程度を指定できます |
| -fa-bounce-jump-scale-y | ジャンプ時の縦のゆがみの程度を指定できます。 |
| –fa-bounce-land-scale-x | 着地時の横のゆがみの程度を指定できます |
| –fa-bounce-land-scale-y | 着地時の縦のゆがみの程度を指定できます |
<div class="fa-3x">
<i class="fa-solid fa-frog fa-bounce"></i>
<i class="fa-solid fa-frog fa-bounce" style=" --fa-bounce-start-scale-x: 1; --fa-bounce-start-scale-y: 1; --fa-bounce-jump-scale-x: 1; --fa-bounce-jump-scale-y: 1; --fa-bounce-land-scale-x: 1; --fa-bounce-land-scale-y: 1; --fa-bounce-rebound:-0.5em; " ></i>
<i class="fa-solid fa-frog fa-bounce" style=" --fa-bounce-start-scale-x: 1; --fa-bounce-start-scale-y: 1; --fa-bounce-jump-scale-x: 1; --fa-bounce-jump-scale-y: 1; --fa-bounce-land-scale-x: 1; --fa-bounce-land-scale-y: 1; --fa-bounce-rebound: 0;" ></i>
<i class="fa-solid fa-frog fa-bounce" style=" --fa-bounce-start-scale-x: 1.5; --fa-bounce-start-scale-y: 2.0; --fa-bounce-jump-scale-x: 1; --fa-bounce-jump-scale-y: 1; --fa-bounce-land-scale-x: 1; --fa-bounce-land-scale-y: 1;--fa-bounce-rebound:-0.125em;--fa-bounce-height: -0.8em " ></i>
<i class="fa-solid fa-frog fa-bounce" style=" --fa-bounce-start-scale-x: 1; --fa-bounce-start-scale-y: 1; --fa-bounce-jump-scale-x: 1.5; --fa-bounce-jump-scale-y: 2.0; --fa-bounce-land-scale-x: 1; --fa-bounce-land-scale-y: 1;--fa-bounce-rebound:-0.5em; " ></i>
<i class="fa-solid fa-frog fa-bounce" style=" --fa-bounce-start-scale-x: 1; --fa-bounce-start-scale-y: 1; --fa-bounce-jump-scale-x: 1; --fa-bounce-jump-scale-y: 1; --fa-bounce-land-scale-x: 1.5; --fa-bounce-land-scale-y: 2.5; --fa-bounce-rebound: 0;" ></i>
</div>Flip（フリップ）
Flipは回転の効果となります。
| クラス | 説明 |
| fa-flip | アイコンを回転させる効果です |
Flipと同時に利用する効果のユティリティは以下の通りです。
| ユティリティ | 説明 |
| –fa-flip-x | 回転させる軸のx座標を指定できます（0.0～1.0） |
| –fa-flip-y | 回転させる軸のy座標を指定できます（0.0～1.0） |
| –fa-flip-z | 回転させる軸のz座標を指定できます（0.0～1.0） |
| –fa-flip-angle | 回転させる程度（角度）を時計回りで直接指定できます。 負数を指定する場合は、反時計回りの角度になります。 単位として「deg」を付与してください |
<div class="fa-3x">
<i class="fa-solid fa-compact-disc fa-flip"></i>
<i class="fa-solid fa-money-check-dollar fa-flip" style="--fa-animation-duration: 3s;" ></i>
<i class="fa-solid fa-scroll fa-flip" style="--fa-flip-x: 1; --fa-flip-y: 0;" ></i>
<i class="fa-solid fa-scroll fa-flip" style="--fa-flip-x: 0; --fa-flip-y: 1;" ></i>
<i class="fa-solid fa-scroll fa-flip" style="--fa-flip-x: 0; --fa-flip-y: 0; --fa-flip-z: 1;" ></i>
<i class="fa-solid fa-scroll fa-flip" style="--fa-flip-x: 0.5; --fa-flip-y: 0.5;" ></i>
<i class="fa-solid fa-scroll fa-flip" style="--fa-flip-angle:270deg" ></i>
<i class="fa-solid fa-scroll fa-flip" style="--fa-flip-angle:-80deg" ></i>
</div>
Shake（シェイク）
Shakeはアイコンに震えの効果を加えます。
| クラス | 説明 |
| fa-shake | アイコンを震わせる効果を与えます |
<div class="fa-3x">
<i class="fa-solid fa-bell fa-shake"></i>
<i class="fa-solid fa-lock fa-shake"></i>
<i class="fa-solid fa-stopwatch fa-shake"></i>
<i class="fa-solid fa-bomb fa-shake"></i>
</div>
Spin（スピン）
Spinはアイコンを時計回り、または反時計周りに回転させる効果になります。
| クラス | 説明 |
| fa-spin | アイコンを３６０度時計回りに回転させます |
| fa-spin-pulse | アイコンを８段階で３６０度時計回りに回転させます １段階（１ステップ）で３５度ずつ回転します |
| fa-spin-reverse | アイコンを３６０度反時計回りに回転させます |
<div class="fa-3x">
<i class="fa-solid fa-sync fa-spin"></i>
<i class="fa-solid fa-circle-notch fa-spin"></i>
<i class="fa-solid fa-cog fa-spin"></i>
<i class="fa-solid fa-cog fa-spin fa-spin-reverse"></i>
<i class="fa-solid fa-spinner fa-spin-pulse"></i>
<i class="fa-solid fa-spinner fa-spin-pulse fa-spin-reverse"></i>
</div>その他カスタマイズユティリティ
最後にすべてのアニメーションに適用できるCSSプロパティ（ユティリティ）を紹介しておきます。
| ユティリティ | 説明 |
| –fa-animation-delay | 効果開始までの時間を指定 秒の場合には単位の「s」を付けてください ミリ秒の場合は単位の「ms」を付けてください 指定方法はこちらを参照してください |
| –fa-animation-direction | 効果の適用方角を指定できます。 「reverse」を指定すれば逆回転になります。 指定方法はこちらを参照してください |
| –fa-animation-duration | 効果の適用時間を指定できます。 秒の場合には単位の「s」を付けてください ミリ秒の場合は単位の「ms」を付けてください 指定方法はこちらを参照してください |
| –fa-animation-iteration-count | 効果の繰り返し回数を指定できます。 指定方法はこちらを参照してください |
| –fa-animation-timing | 効果の進行方法を指定できます。 指定方法はこちらを参照してください |
<div class="fa-3x">
<i class="fa-solid fa-cog fa-spin"></i>
<i class="fa-solid fa-cog fa-spin" style="--fa-animation-delay: 3000ms" ></i>
<i class="fa-solid fa-cog fa-spin" style="--fa-animation-direction: reverse;" ></i>
<i class="fa-solid fa-cog fa-spin" style="--fa-animation-duration: 15s;"></i>
<i class="fa-solid fa-compact-disc fa-spin" style="--fa-animation-duration: 30s; --fa-animation-iteration-count: 1;"></i>
<i class="fa-solid fa-registered fa-spin" style="--fa-animation-duration: 3s; --fa-animation-iteration-count: 5;--fa-animation-timing: ease-in-out;"></i>
</div>ボーダーと右／左寄せ
引用やアイコンボタンのようにFont Awesomeを利用する場合のクラスとなります。
| クラス | 説明 |
| fa-border | アイコンに枠線を付けられます |
| fa-pull-left | 左サイドにアイコンを固定させられます |
| fa-pull-right | 右サイドにアイコンを固定させられます |
borderとpullと同時に利用する効果のユティリティは以下の通りです
| –fa-border-color | 枠線の色を指定できます |
| –fa-border-padding | 枠線のパディングを指定できます |
| –fa-border-radius | 枠線の半径を指定できます 指定方法はこちらを参照してください |
| -fa-border-style | 枠線のスタイルを指定できます |
| –fa-border-width | 枠線の幅を指定できます |
| –fa-pull-margin | 左寄せ、または、右寄せのクラスにしてできるマージンを指定できます |
ここは引用文になります
詳しくは右に移動してください…
<div>
<i class="fa-solid fa-quote-left fa-2x"></i>
ここは引用文になります
<i class="fa-solid fa-quote-right fa-2x"></i>
</div>
<div>
<i class="fa-solid fa-arrow-right fa-2x fa-pull-right fa-border"></i>
詳しくは右に移動してください...
</div>
アイコンを重ねる
複数のアイコンを重ねることもできます。
まず、以下のようなクラスが用意されています。
| クラス | 説明 |
| fa-stack | 重ねるアイコンの親オブジェクトに指定するクラス |
| fa-stack-1x | 重ねるアイコンのサイズを１倍にできます |
| fa-stack-2x | 重ねるアイコンのサイズを２倍にできます |
| fa-inverse | 重ねるアイコンの色の領域（塗りつぶされた領域とそうでない領域）を反転させます |
同時に利用するユティリティは以下の通りです
| ユティリティ | 説明 |
| –fa-stack-z-index | 重ねるアイコンのz-indexを指定できます |
| –fa-inverse | 反転させた場合の塗りつぶし領域に色を指定できます |
サンプル
まず、以下のカメラアイコンと
以下の禁止アイコンがあります。
これを重ね合わせ、禁止アイコンの色を赤色にすると、以下のような「写真撮影禁止」のようなアイコンをつくることができます。
<span class="fa-stack fa-2x">
<i class="fa-solid fa-camera fa-stack-1x"></i>
<i class="fa-solid fa-ban fa-stack-2x" style="color:Tomato"></i>
</span>
その他、以下のようなサンプルも紹介しておきます。
<span class="fa-stack fa-2x">
<i class="fa-solid fa-circle fa-stack-2x"></i>
<i class="fa-solid fa-flag fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fab fa-twitter fa-stack-1x fa-inverse" style="--fa-stack-z-index: 2;"></i>
<i class="fa-solid fa-square fa-stack-2x" style="--fa-stack-z-index: 1;"></i>
</span>
<span class="fa-stack fa-2x" style="--fa-inverse: #1da1f2;">
<i class="fa-solid fa-square fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>ご参考
関連ページ
- ウェブアイコン「Font Awesome」の導入方法
- Google Fonts Iconsの紹介
- jQuery UI のウェブアイコン（Icons）を紹介
- ウェブアイコン「Ionicons」のご紹介
- ウェブアイコン「Typicons」のご紹介
- ウェブアイコン「Foundation Icon Fonts 3」のご紹介
- Bootstrap Iconsの紹介
