見た目はアイコン！管理はフォント！便利なFont Awesomeの使い方

この記事の前提条件

対象: HTML・CSS、Font Awesome 5
難易度: ★☆☆
所要時間: 約10分

今回はFont Awesome5のアイコンの使い方をご紹介します。Font Awesomeとはアイコンを画像ではなく文字として扱うことができるとっても便利なツールです。

SNSリンクのアイコン、ボタンの中の矢印やゴミ箱アイコン、フォームの入力補助アイコンなど、サイト内で何十個もアイコンを使う場面ほど威力を発揮します。画像だと1つずつファイルを用意する手間がかかりますが、Font Awesomeならコードをコピペするだけで済みます。

例えば、アイコンを画像で用意する場合は様々なサイズでデータを用意しなければなりません。しかし、Font Awesomeの大きさやカラーはCSSで指定することもできるため、状況に応じて容易に変更することができます。また、アイコンの種類も豊富な上にテイストも同じなので、アイコンを多用しても統一感を損なうことがありません。

では、そんな便利なFont Awesomeの使い方を一緒に学んでいきましょう！

目次非表示

1. Font Awesomeを読み込む
2. アイコンのコードを調べる
3. HTMLタグの挿入
応用
- サイズ変更
- アイコンの幅を揃える
まとめ

目次へ

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一覧ページに行きます。

Font Awesome公式サイトの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.

💡 疑似要素で使う方法との使い分け

今回のように<i>タグを直接HTMLに書く方法は、コードを見ればどのアイコンかすぐわかるのがメリットです。一方で、アイコンを大量に使い回したり、CSSだけで一括管理したい場合は、Font Awesome5をCSSの疑似要素で指定する方法【表示されない時の対処法も】の方法もあわせて覚えておくと便利です。