Font Awesomeとは
すでに知っている人が多く今更にはなりますが、先日Font Awesomeを初めて触りました。これまでにHTMLのソースファイルを見ていて、何度か「imgタグが見当たらないが、この画像ファイルはどこで設定されているのだろう？」と思うことがありましたが、それらはFont Awesomeというアイコンを文字として扱うことを可能にしたツールを使っていたことが分かりました。
Font Awesomeはアイコンをフォントとして表示してCSSでデザインを設定することも出来るので、特に自分でアイコンを作成したりすることが出来ないプログラマーにとっては、かなり有益なツールになります。アイコンの種類も豊富にあって色を上手く設定したりすれば、かなりのケースのアイコンを表現出来ると考えられます。
Font Awesomeのアイコン一覧
他にもGoogleが提供しているマテリアルアイコンなどもあり、こういったツールが充実してくれば個人や少人数で開発するプロダクトなどがデザイン的な妥協が少なくなり、質が高いプロダクトが増えそうで楽しみです。
Font Awesomeを表示する際のCSSの設定
Font Awesomeを使用するための設定として、まずはFont Awesomeを読み込まなければいけません。方法が2つあります。
1.CDNを使用する
2.サーバーにデータをアップロードする方法
上記の２種類の方法があります。個人のプロダクトで簡単に試す場合はCDNを使うのが良いでしょう。実際にFont Awesomeのフォントを表示するためのCSSの設定は以下のようになります。
.material a::after {
content: "\f019"
font-family: "FontAwesome"
}
注意点としてはfont-familyを指定しないと、フォントが未指定とされ□が表示されてしまいますのでご注意して下さい。