今回は、Font Awesomeの初期設定、基本的な使い方と、カスタムCSSクラスを使用した色や大きさの変更方法やアニメーションなどの様々な使用パターンやカスタマイズ方法を紹介します。
Font Awesomeとは、CDNを利用してCSSとLESSに基づくフォントとアイコンをWebサイト内に簡単に導入することができるツールキットです。
無料プランと有料プランとがあるが、無料プランでも1000種類以上のアイコンが用意されていて、編集もすることが出来るため、これ1つで様々な種類のアイコンを使うことができます。
下記のリンクはFont AwesomeのTOPのリンクです。
Font Awesomeを使用する準備
Font Awesomeを使用するには、自身のサイトにFont Awesomeのデータを読み込む記述をしなくてはいけません。CDNと言われる専用サーバーからCSSを読み込みます。
まずは下記のリンクを自身のサイトの<head>〜</head>の間に貼り付けます。
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">ただ上記の方法は旧バージョンのやり方です。最新のバージョンを使用する場合は以下の方法を試して下さい。
最新バージョンの場合
最新バージョンだとFont Awesomeのアカウント作成が必要です。まずは以下のSign inボタンからアカウントを作成しましょう。
アカウントを作成したら、同じくSign inボタンからログインして下さい。マイページへ移動して右上にあるミステリーパーソンアイコンをクリックして開くメニューから「Font Awesome CDN」をクリックして下さい。
すると以下のページに移動するので、そのにあるコードを<head>〜</head>の間に入れます。
他にも、最新版では自分だけのフォントを集めたフォントkidを作成することが出来ます。その場合はコードは別物ですし、フォントの登録作業とかもあるので注意して下さい。ただCDNからの読み込みで事足りることが大半なので今回は割愛します。
Font Awesomeの基本的な使い方
Font Awesomeの基本的な使い方は、まずはTOPページの左上にある「Search icons…」の検索窓からアイコンを探します。（英語のみ）
目当てのアイコンを見つけたらそのページを開きます。すると下記のようなアイコン編集画面が出てきます。
アイコンページの左上にある、下記写真の部分のコードをコピーします。
そのコードをそのまま自身のサイトに貼り付けます。
<i class="fas fa-star"></i>すると下記のようにアイコンが表示されます。
Font Awesomeの色々なカスタム
Font Awesomeでは、クラス名に決まったクラスを指定するだけで大きさの変更、回転など様々なカスタマイズを簡単に行うことが出来るようになっています。またアイコンフォントなのでテキスト同様にCSSのプロパティが使えるのでカラーや幅なども簡単に編集できます。
それらのカスタマイズ方法をいくつか紹介していきます。
大きさの変更
大きさの変更はクラス名「fa-○○」をつけることで可能です。「fa-2x」以降は2倍、3倍、4倍….と倍になっていき最大10倍まで可能です。
<i class="fas fa-desktop fa-3x">| クラス名 | 実際のサイズ | 実際の見た目 |
|---|---|---|
| fa-xs | .75em | |
| fa-sm | .875em | |
| fa-lg | 1.33em | |
| fa-2x | 2em | |
| fa-3x | 3em | |
| fa-4x | 4em | |
| fa-5x | 5em |
カラーの変更
カラーの変更はシンプルにCSSでcolorプロパティを付けてあげます。
<i class="fas fa-apple-alt fa-5x" style="color:#7cfc00;"></i>幅の統一
アイコンの幅はアイコンによって多少異なります。下記のアイコンは幅の指定なしで表示させているアイコンです。見て分かる通り犬と馬の幅が広いです。
幅の変更はクラス名「fa-fw」を付けることで幅を統一してくれます。
<div><i class="fas fa-cat fa-fw fa-2x" style="background:rgba(255, 127, 80, .5);padding: 2px 2px;"></I></div>
<div><i class="fas fa-dog fa-fw fa-2x" style="background:rgba(255, 127, 80, .5);padding: 2px 2px;"></I></div>
<div><i class="fas fa-horse fa-fw fa-2x" style="background:rgba(255, 127, 80, .5);padding: 2px 2px;"></I></div>
<div><i class="fas fa-dove fa-fw fa-2x" style="background:rgba(255, 127, 80, .5);padding: 2px 2px;"></I></div>リストで使う
アイコンをリストマーカーに変更したい場合、ulタグに「fa-ul」のクラス名を付けて、liタグに「fa-li」のクラスを付けることで可能です。
- リスト1
- リスト2
- リスト3
- リスト4
<ul class="fa-ul">
<li><i class="fa fa-check fa-li"></I>リスト1</li>
<li><i class="fa fa-check fa-li"></I>リスト2</li>
<li><i class="fa fa-check fa-li"></I>リスト3</li>
<li><i class="fa fa-check fa-li"></I>リスト4</li>
</ul>枠線を付ける
アイコンに枠線を付けたい場合は「fa-border」で可能です。
<i class="fa fa-quote-left fa-2x fa-border"></I>float表示（回り込み）
「fa-pull-left」or「fa-pull-right」を付けることアイコンのfloat表示（回り込み）が可能です。
「fa-pull-left」と「fa-pull-right」は引用文などに使える。このように左上と右上に任意のアイコンを表示できます。
<div style="background: #ddd;"><i class="fas fa-quote-left fa-sm fa-pull-left"></i>
<p>「fa-pull-left」と「fa-pull-right」は引用文などに使える。このように左上と右上に任意のアイコンを表示できます。</p></div>アイコンを重ねる
アイコン同士を重ねるクラスも用意されています。下記のように「div class=”fa-stack fa-〇〇」で囲ってからアイコンを二つほど貼り付けます。その後に「fa-stack-2x」「fa-stack-1x」のクラスを付けます。
fa-stack-2xの方が大きいので下レイヤーとなるアイコンに付けます。
<div class="fa-stack fa-5x">
<i class="fas fa-mobile-alt fa-stack-2x"></i>
<i class="fas fa-align-justify fa-stack-1x fa-inverse" style="color:#ddd;"></i>
</div>アイコンを回転させる
| クラス名 | 回転 |
|---|---|
| fa-rotate-90 | 90°回転 |
| fa-rotate-180 | 180°回転 |
| fa-rotate-270 | 270°回転 |
| fa-flip-horizontal | 水平方向に反転 |
| fa-flip-vertical | 垂直方向に反転 |
<i class="fab fa-amilia fa-rotate-90"></I>
<i class="fab fa-amilia fa-rotate-180"></I>
<i class="fab fa-amilia fa-rotate-270"></I>
<i class="fab fa-amilia fa-flip-horizontal"></I>
<i class="fab fa-amilia fa-flip-vertical"></i>アニメーションを付ける
Font Awesomeでは回転アニメーションが用意されています。
回転させたい場合は「fa-spin」のクラスを追加。8ステップで回転させたい場合は「fa-pulse」のクラスを付けることで可能です。
<i class="fas fa-sync-alt fa-6x fa-spin"></I>
<i class="fas fa-cog fa-6x fa-pulse"></I>
<i class="fas fa-fan fa-6x fa-spin"></I>
<i class="fas fa-spinner fa-6x fa-pulse"></i>カスタム用CSSクラスまとめ（早見表）
| クラス | 説明 |
|---|---|
| fa-xs | 大きさ .75em |
| fa-sm | 大きさ .875em |
| fa-lg | 大きさ 1.33em |
| fa-2x（3x.4x.5x…） | 大きさ 2em（3em.4em.5em…） |
| fa-fw | 幅の統一 |
| fa-ul | リスト化 |
| fa-li | リスト化 |
| fa-border | 枠線 |
| fa-pull-left | 回り込み（左） |
| fa-pull-right | 回り込み（右） |
| fa-stack | 重ね合わせ |
| fa-rotate-90（180.270…） | 90°（180°.270°）回転 |
| fa-flip-horizontal | 水平方向に反転 |
| fa-flip-vertical | 垂直方向に反転 |
| fa-spin | 回転 |
| fa-pulse | 8ステップ回転 |
以上が「【最新版】Font Awesomeの使い方とカスタムCSSクラス」でした。
今回の記事を参考にしていろんなパターンのアイコンデザインに挑戦してみて下さい。
