Font Awesomeのアイコンフォントを自由自在にデザインする方法と便利ツールのご紹介

Font Awesomeの登場により、アイコンフォントの敷居がかなり低くなりました。今回は、Font Awesomeをもっともっと有効活用するために、アイコンフォントを利用したリストを作成します。

実は、Font Awesomeには、最初からリスト構造を意識したクラスが定義されています。それが、 fa-ul 、 fa-li クラスです。しかし、このクラスだけではFont Awesomeの枠をはみ出して、思い通りのカスタマイズができません。

1. Font Awesome Examples

そこで、今回はもっと自由にデザインするため、Font Awesomeのアイコンを利用したサンプルを一から作成してみました。

サンプル

Font Awesomeのアイコンを、用途に応じて「目次」「ダウンロード」「チェックリスト」「リンク」の4つに使い分けて使用しています。今回のサンプルは以下の通りです。

See the Pen uImwj by Macious (@Macious) on CodePen.

ソースコード

サンプルのソースコードは以下の通りです。

ol.common-list {
  margin: 40px 0;
  list-style: none;
}
ol.common-list > li {
  padding-left: 1em;
  text-indent: -1em;
}
ol.common-list > li:before {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weig
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-right: 1em;
  color: #30add1;
}
ol.table-of-contents > li:before {
  content: '\f03a';
}
ol.table-of-contents ol {
  list-style: square;
}
ol.check-list > li:before {
  content: '\f14a';
}
ol.link-list > li:before {
  content: '\f0c1';
}
ol.download-list > li:before {
  content: '\f019';
}

解説

まず、Font Awesomeのスタイル定義は以下の通りです。サンプルは、このソースコードをもとに弊サイト用にカスタマイズしてあります。今回はカスタマイズしている点を中心にご紹介します。

.fa {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

全てのクラスに共通のスタイルを定義する

上記ソースコードを見ていただければ分かるとおり、目的に応じた4つのリンクに対応するための共通クラス common-list を定義しています。 common-list の定義内容は、Font Awesomeの定義とほぼ同様ですが、若干カスタマイズしています。

ol.common-list {
  margin: 40px 0;
  list-style: none;
}
ol.common-list > li {
  padding-left: 1em;
  text-indent: -1em;
}
ol.common-list > li:before {
  /* omitting... */
  padding-right: 1em;
  color: #30add1;
}

最初の定義は、 OL（Ordered List） のスタイルを無効化するものです。また、リストの上下に余白を適宜指定します。

3番目の定義は、色指定と余白指定です。アイコンフォントの色と、アイコンフォントの右端の余白を、フォントサイズと同一値 1em にして、1文字分のスペースを確保しています。

ポイントとなるのは、2番目の定義です。2番目の定義がない状態が上図です。おわかりいただけたでしょうか。文章が長くなり改行が発生した場合に、文字列の始まりがアイコンフォントと同一になってしまいます。

text-indent: -1em を指定して文字を寄せ、 padding-left: 1em で余白を調整しているというわけです。

指定するUnicodeの値を取得する

Font Awesomeのアイコンを使用するためには、目的にあったUnicode値をCSSファイルに指定する必要があります。Unicode値は、公式サイトの各アイコンの詳細説明から入手できますので、確認してみてくださいね。下記リンクは、ダウンロードリンクに使用しているアイコンの例です。

1. fa-download: Font Awesome Icons

リストを拡張したい場合

さらに別のリストを作成したい場合は、この3行をスタイルシートに追加するだけでOKです。 common-list と合わせて使用してください。

ol.check-list > li:before {
  content: '\f14a';
}

便利ツール

Font Awesomeを利用するために、アイコンごとのクラス名を全て覚えるのは大変です。また、毎回公式サイトまでアクセスしてアイコンのクラス名を探すのも不便でしょうがありません。

この悩みを解消してくれるのが、「Font Awesome Workflow」。Alfredと連携して、キーワードに「fa」と入力するだけで、「Font Awesome」のアイコンが検索できるようになります。

キーワードである「fa」に続けて、キーワードをさらに入力すれば「Font Awesome」の中からアイコンを検索してくれます。また、検索結果に合わせて↵ を押せば、そのアイコンを表示するために必要なクラス名をペーストしてくれる優れものです。

使用するためには、AlfredのPowerPackライセンス（Mac App Storeからダウンロードした場合は使用できない）が必要であるため、若干敷居が高いのですが、もしお持ちの方は是非登録してみてください。

まとめ

いかがでしたでしょうか？こんなこと知ってるよ、という方がほとんどかもしれません。まだ、Font Awesomeに触れたことがない、デフォルトのリストのデザインを変更したい、と考えている方はぜひお試しくださいね。