今回はFont Awesome5のアイコンの使い方をご紹介します。Font Awesomeとはアイコンを画像ではなく文字として扱うことができるとっても便利なツールです。
例えば、アイコンを画像で用意する場合は様々なサイズでデータを用意しなければなりません。しかし、Font Awesomeの大きさやカラーはCSSで指定することもできるため、状況に応じて容易に変更することができます。また、アイコンの種類も豊富な上にテイストも同じなので、アイコンを多用しても統一感を損なうことがありません。
では、そんな便利なFont Awesomeの使い方を一緒に学んでいきましょう！
1.Font Awesomeを読み込む
Font AwesomeのCDNを<head>タグ内に記載し、webフォントとして使える状態にします。公式サイトからフォントファイルをダウンロードして使うこともできますが、CDNサーバーからファイルを読み込む方法が良いでしょう。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
2.アイコンのコードを調べる
2-1.icon一覧へ
Font Awesomeの公式サイトの上部のiconをクリックし、icon一覧ページに行きます。
2-2.使用するアイコンを検索
icon一覧ページに移動したら、使いたいアイコンを選びます。この時に左側の【Free】にチェックを入れておくと無料のものだけが表示されるので、Pro license（有料）ではない方はチェックを入れておくと良いでしょう。
上部の検索窓から文字を打って検索することもできますが、日本語での検索には対応していないので英語で検索するか、一覧で流し見しながら探しましょう。
2-3.HTMLタグのコピー
アイコンを選び個別のページに移動します。ページ上部に表示されているHTMLタグをクリックするとコピーすることができます。
3.HTMLタグの挿入
先ほどコピーしたHTMLタグを任意の箇所に貼り付けます。そうすると下の様に貼り付けたコードがアイコンに変わっているのがわかるかと思います。
大きさや色変更はCSSで行います。見た目はアイコンですが扱いは文字ですので、大きさはfont-sizeで指定することができます。
応用
FontAwesomeのオプションを使用すると、様々な表現が可能になりますので、いくつかご紹介したいと思います。
サイズ変更
classに「fa-◯x(◯は2~10の数字)」「fa-xs」「fa-sm」「fa-lg」と記載するとサイズ変更することができます。「fa-◯x」は◯emの処理がされます。(親要素のフォントサイズに依存します)
「fa-xs」は.75em。「fa-sm」は.875em。「fa-lg」は1.33emとなります。
アイコンの幅を揃える
アイコンの大きさを同じ数値に揃えてもそれぞれ元々の幅は違うので、下の画像の左側の様に左右の余白に差が出てしまい文字の始まりが揃いません。そんな時にはclassに「fa-fw」と記載してあげるとアイコンの幅を揃えてあげることができます。
リストで使用する場合
まず<ul>に「fa-ul」というclass名をつけます。次に子要素の<li>の中にfontawesomeのタグを置きその中のclassに「fa-li」とつけてあげます。高さが揃わない場合はline-heightで調節することができます。
See the Pen
fa-liの使い方 by Hiroki Nakamura (@marurain)
on CodePen.
