Font Awesomeを使ってアイコンをWebフォントで表示しよう

Font Awesomeはサイトで汎用的に使用されるようなアイコンをWebフォントとして表示することができます。表示されたアイコンはWebフォントとして扱うので、差し替えはもちろん、色の変更や大きさの拡大・縮小もソース上で行えます。

こちらを使用することにより、汎用的なアイコンを毎回作るという時間を要する作業が少なくなるかもしれません。実際、職場で担当しているサイトにもFont Awesomeを使ってのWebフォントのアイコンが使用されていました。
当時はFont Awesomeの存在を知らなかったので前任者が全部作ったのかと思っていました…

Font Awesomeのアイコンのクオリティも十分高いと思うので、独自アイコンの必要性がない部分であれば、こちらを使用しての表示で問題ないのかなって思います。

Font Awesomeって?

初見の方もいると思いますので、簡単な説明をしておきます。

Font Awesomeって?

Font Awesomeは500種類以上のアイコンをフォントとして用意してくれています。
CSSのclassで特定のアイコンを指定し表示しています。

基本的には無料ですが使わせてもらうわけですから、ライセンスのページも一応見ておいたほうがよいかなと(英語ですが)
Font Awesome

Font Awesomeの使い方

使う方法は2種類あります。
・CDN上でFont Awesomeを読み込んで利用する
・Font Awesomeをダウンロードして利用する

CDNから読み込むほうが簡単なので、今回はこちらの方法で進めます。
(Font Awesomeをダウンロードして使用する方法は、参考サイト様が詳しく説明されていますのでそちらをご確認ください。)

1.CDN上のファイルを読み込む準備
以下のソースをhtml側に記述します。

html

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">

2.使用したいアイコンのタグを記述する
ページ上部のグローバルナビの中にある「Icons」をクリックしてアイコン一覧ページへアクセスします。
ページ上部のグローバルナビの中にある「Icons」をクリックしてアイコン一覧ページへアクセスします。

少しスクロールすると、500を超えるアイコンが一覧で表示されているので、使用したいアイコンをクリックします。
少しスクロールすると、500を超えるアイコンが一覧で表示されているので、使用したいアイコンをクリックします。

アクセスしたアイコンの詳細ページには、ソースに記述するhtmlタグが記載されているので、そのまま使いたい箇所にコピペします。
アクセスしたアイコン詳細ページには、ソースに記述するhtmlタグが記載されているので、そのまま使いたい箇所にコピペします。

これだけでアイコンが表示されるようになります。
上記の手順でサンプルページにアイコンをいろいろ置いてみました。
サンプルページを表示

また、Font Awesomeはデフォルトで使用できるclassが用意されていますので、ある程度のことはできてしまいます。
とっても便利!
Font Awesome Examples

Font Awesomeのメリット・デメリット

使ってみた感想を含めてのメリット・デメリットを考えると、こんな感じかなと思います。

メリット

 - Webフォントの扱いなので大きさや色の変更が容易に可能
 - デフォルトで動きのあるclassも使える
 - 用意されている数が豊富
 - 重くない
 - デザイナーのアイコン制作の時間がなくなる

デメリット

 - 色が単色しかできない
 - 擬似要素を用いているので、古いブラウザには非対応
 - Font Awesomeは知名度が高いので、他のサイトとアイコンなどが被る可能性大

この中では、デザイナーのアイコン制作の時間がなくなるという部分が一番大きいところだと思います。なくなるというよりは大幅に短縮できるといったほうが良いでしょうか。
Font Awesomeを使うと、アイコンを作る時間というよりはアイコンを探す時間になるのかなと。
あとは、モック作成などのサイト制作の諸段階で簡易的なアイコンを入れておくなどのシーンでも活躍してくれそうです。

今回初めて使ってみて、調べてみて、Font Awesomeは幅広くとても役に立つと思いました。
使えそうなケースではどんどん使っていきたいですね。

また、調べていたら、Font Awesomeをpngで出力できるツールがあるみたいです。
使ったことはないので、機会があったら使ってみようと思います。

参考
楽して便利!Webアイコンフォント『Font Awesome』の使い方と活用 Tips – HAM MEDIA MEMO
http://h2ham.net/font-awasome

Font Awesomeをpngで出力できるツールまとめ | infoScoop開発者ブログ
http://www.infoscoop.org/blogjp/2014/11/14/tools-for-fontawesome-to-png/

PAGE TOP