Font Awesomeのアイコン一覧と文字コードを簡単に検索できるWebサービスを作った。
Font AwesomeはさまざまなWebサービスで使われているアイコンフォントで、アイコン一覧も公式サイトで提供されているし、文字コード一覧もこちらにあったりと、必要なリソースもまずまず充実している。
しかし意外と「インクリメンタルに検索できて」「文字コードも一覧に掲載されていて」「クラス名や文字コードがコピペしやすい」サイトが見つからなかったので作ってみた。
- 検索窓ではスペース区切りで文字列指定できる（"tw sq"は"fa-twitter-square"にマッチ）
- その他の正規表現も使える（スペース区切りでだいたい用が足りるのであまり出番なさそう）
- タブを押すとクラス名や文字コードにフォーカスが移るのでコピペしやすい
こんなところが特徴である。
文字コードが必要になる典型的な例は、Font Awesomeのアイコンフォントをスタイルシートの content プロパティで使うとき。ナビやボタンでテキストは左寄せ、アイコンは右寄せといったデザインにしたいときは、アイコン自体はHTMLには記載せず、スタイルシートの :before や :after 擬似要素の content プロパティを使うことが多いが、このプロパティは文字コードで指定する必要がある。'\f061'と指定すれば右矢印が出てくるといった塩梅である。
