Font Awesome最新バージョン(5.x)と旧バージョン(4.7)の使い方
Font Awesomeは現在、最新バージョン(5.x)と旧バージョン(4.7)の両方が利用できます。
使い方に少し違いがあるので、それぞれについて以下の順序で紹介していきたいと思います。
なお、Font Awesomeには無料で利用できるFree版と有料（年間$99）のPro版とがありますが、この記事ではFree版についてのみ紹介していきます。
Font Awesome最新版（5.x）の使い方
Font Awesomeの新しいバージョンの使い方について、利用する準備、使用するアイコンの選択、スタイリングの順で紹介していきます。
Font Awesome最新版（5.x）を利用する準備
Font Awesomeの最新版を利用する準備としてサイトにFont Awesomeを読み込ませる方法には、①KitCode、②ダウンロード、③CDNの三つを利用する方法があります。
以下で、それぞれについて紹介していきます。
Kit Codeを取得して利用する方法
Kit Codeを取得して利用するには、メールアドレスを登録してアカウントを作成する必要があります。
Kit Codeの取得はFont Awesomeのトップページにある「Start for Free」ボタンから進んで、メールアドレスを入力、メールに送られてきたページでパスワードを設定すると、アカウントが作成され、Kit Codeを取得できます。
headタグの中に下の記述を設置してKit Codeを読み込ませます。
<script src="https://kit.fontawesome.com/〇〇〇〇〇〇〇〇.js" crossorigin="anonymous"></script>
「〇〇〇〇〇〇〇〇」の部分には、ご自身のKit Code IDが入ります。
Font Awesomeにサインインして「Settings」のページなどを開くと「Copy Kit Code」ボタンがあるので、コピーして貼り付けましょう。
Kit Codeを通してFont Awesomeを利用する場合は、「Settings」で設定を行います。
「Technology」の項目で、「Web Font」を利用するか「SVG」を利用するかを選択します。設定を変更した後は、下にある「Save Changes」ボタンで設定を保存しておきましょう。
ダウンロードして利用する場合
Font AwesomeのStartページの真ん中あたりにダウンロードボタンがあります（下図の赤枠）。
ここからダウンロードしたものをサイトに設置して利用することもできます。
・CSSでFont Awesomeを利用する場合
ダウンロードしたzipファイルを展開したファイル群の中から、「webfonts」フォルダと「css」フォルダの中にある「all.css」とをサイトディレクトリに設置します。
headタグの中に下の記述を設置してcssファイルを読み込ませます。
（ファイルへのパスは変更してください。）
<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">
・SVGでFont Awesomeを利用する場合
ダウンロードしたzipファイルを展開したファイル群の中から、「js」フォルダの中にある「all.js」をサイトディレクトリに設置します。
headタグの中に下の記述を設置してjsファイルを読み込ませます。
（ファイルへのパスは変更してください。）
<script defer src="/your-path-to-fontawesome/js/all.js"></script>
CDNを利用する場合
Font Awesomeのサイトで案内されているものではありませんが、一応アカウントなしで利用できるCDNもあるようですので紹介しておきます。
ダウンロードの場合と同様、css版とjs版とがあります。
cdnjs：font-awesome
使用するアイコンの選択
Font Awesome最新版（5.x）のアイコン一覧ページで使用したいアイコンを選択します。
使用したいアイコンをクリックすると、下のような画面が開くので、HTMLコード（右の赤線）の部分をクリックしてコピーし、貼り付けて使用できます。
CSSの擬似要素で使用したいときはUNIコードの記載（左の赤線）もありますので、こちらをクリックしてコピーしてください。
記述例をいくつか紹介します。
アイコンには、iタグと同じようにspanタグも使用できます。
擬似要素でアイコンを使用する際には、font-familyの指定に注意が必要です。上で紹介したHTMLコードのclass属性が「fab」で始まるアイコンの場合は、
font-family: "Font Awesome 5 brands";
を指定し、それ以外のアイコンの場合は、
font-family: "Font Awesome 5 free";
を指定してください。
See the Pen
qBOYWZv by saku (@web-saku)
on CodePen.
アイコンのスタイリング
Font Awesomeを利用して表示するアイコンでは、HTMLコードのclass属性の要素を指定することで、アイコンのサイズを変えたりするスタイリングを行うことができます。
このスタイリングはたくさんの種類が用意されていますが、主なものについて紹介していきたいと思います。
FontAwesome5：Stylingページ右側にあるメニューの「Styling」の中には、ここで紹介するもの以外にもいろいろな項目があります。
Sizing Icons：サイズの変更
Font Awesomeのアイコンの表示サイズは、CSSで変更することもできますが、class属性に下の表のような指定をすることでも変更することができます。
| classに指定する要素 | アイコンのサイズ |
|---|---|
| fa-xs | 0.75em |
| fa-sm | 0.875em |
| fa-lg | 1.33em |
| fa-2x | 2em |
| fa-3x ｜ fa-9x |
3em ｜ 9em |
| fa-10x | 10em |
See the Pen
ExVbRNV by saku (@web-saku)
on CodePen.
なお、アイコンのサイズは親要素への指定で一括で指定したり、上で紹介したclass属性の記述とCSSとを併用してサイズを調整することもできます。
See the Pen
abvGojr by saku (@web-saku)
on CodePen.
Fixed-Width Icons：幅を一定にする
class属性に「fa-fw」を指定することで、幅の狭いアイコンの左右に余白を持たせて、幅の広いアイコンと揃えることができます。
See the Pen
RwWjBKE by saku (@web-saku)
on CodePen.
Icons in a List：ulやolのリストの中で使用する
ulタグやolタグのclass属性にclass="fa-ul"を指定し、liタグの中のアイコンをclass属性にclass="fa-li"を指定したspanタグで囲むことで、リストアイテムの先頭にくる数字やドットの代わりにアイコンを使用することができます。
liタグの記述は、
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>リストアイテム</li>
のようになります。
前の項目で紹介した「fa-fw」を指定しなくてもアイコンの幅が揃います。
See the Pen
mdeqQYb by saku (@web-saku)
on CodePen.
Rotating Icons：回転・反転
アイコンのclass属性に下の表のような指定をすることでアイコンを回転または反転させることができます。
| classに指定する要素 | アイコンの回転・反転 |
|---|---|
| fa-rotate-90 | 90°回転 |
| fa-rotate-180 | 180°回転 |
| fa-rotate-270 | 270°回転 |
| fa-flip-horizontal | 水平方向に反転（左右に反転） |
| fa-flip-vertical | 垂直方向に反転（上下に反転） |
| fa-flip-both | 水平垂直両方向に反転 |
See the Pen
OJyOrWb by saku (@web-saku)
on CodePen.
Animating Icons：アニメーション
spinner icons categoryのアイコンのclass属性に「fa-spin」か「fa-pulse」を指定することで回転やパルスの動きをつけることができます。
Free版の場合は、アイコンの一覧ページで「free」と「spinners」で絞り込みをかけると、このアニメーションが利用できるアイコンの一覧が表示されます。
See the Pen
vYNWbKZ by saku (@web-saku)
on CodePen.
Font Awesome Animationを利用したアイコンのアニメーション
Font AwesomeとFont Awesome Animationを組み合わせて使用すると、もっといろいろなアニメーション表示を簡単に利用することができます。
Font Awesome Animationの使い方については下の記事で紹介していますので、興味のある方は見てみてください。
Font Awesome Animationの使い方
Font Awesomeと合わせて使用することでアイコンを簡単にアニメーション表示させることができるFont Awesome Animationの使い方を紹介します。
Bordered + Pulled Icons：ボーダーを付ける・左右に寄せる
アイコンのclass属性に下の表のような指定をすることで、CSSを使わなくてもアイコンを左右に寄せたり、ボーダーをつけたりすることができます。
| classに指定する要素 | アイコンの表示 |
|---|---|
| fa-pull-left | 左に寄せる |
| fa-pull-right | 右に寄せる |
| fa-border | ボーダーを付ける |
See the Pen
gOaoYPG by saku (@web-saku)
on CodePen.
Stacking Icons：重ねて表示する
spanタグのclass属性に「fa-stack」を指定して、その中に二つのアイコンを設置することで、二つのアイコンを重ねて表示することができます。
spanタグの中のそれぞれのアイコンの、小さく表示したいアイコンのclass属性に「fa-stack-1x」を指定し、大きく表示したいアイコンのclass属性に「fa-stack-2x」を指定してください。
アイコンに「fa-inverse」を指定すると、色を反転させることができます。
アイコンの重なり順としては、先に記述した方のアイコンが下に、後に記述したアイコンが上に表示されます。
spanタグにsizingの項目で出てきた指定をすることで重なり合った状態のアイコンのサイズを指定することができます。
See the Pen
mdepMqe by saku (@web-saku)
on CodePen.
もっと詳しくアイコンのスタイリングについて知りたい方は下のページを参考にしてみてください。
FontAwesome5：Styling
Font Awesome旧版（4.7）の使い方
Font Awesomeでは、旧バージョンも使用することができます。
Font Awesome最新版のページでも下の図のようにバージョン4のページへのリンクが設置されています。（赤枠）
最新版の紹介と同様に利用する準備、使用するアイコンの選択、スタイリングの順で紹介していきます。
Font Awesome旧バージョン（4.7）を利用する準備
Font Awesome旧バージョン（4.7）では、CDNを利用する方法と、ダウンロードしてサイトに設置する方法とが利用できます。
CDNを利用する場合
Font Awesomeバージョン4のトップページの下の方にCDNへのリンクが設置されています。（赤枠）
このリンク先のCDNを読み込ませることでバージョン4.7のFont Awesomeを利用することができます。
ダウンロードして利用する場合
Font Awesomeバージョン4のGet Startedページからダウンロードできます。
ダウンロードしたzipファイルを展開したフォルダをまるごとサイトに設置し、headタグ内に下のような記述をして読み込ませてください。
（ファイルへのパスは変更してください。）
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
使用するアイコンの選択
Font Awesome旧版（４.７）のアイコン一覧ページで使用したいアイコンを選択してクリックするとHTMLタグやUNIコードが記載されていますので、アイコンを設置したい場所に記述してください。
アイコンのスタイリング
アイコンのサイズを変えたりするスタイリングについては、先に紹介した新しいバージョン(5.x)とあまり変わりがないのでそちらを参考にしてみてください。
Font Awesome旧バージョン（4.7）のスタイリングの方法の詳細については下のページを参考にしてみてください。
Font Awesome4：Examples
Ads
おすすめの書籍紹介
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
コメントを残す