Web Survive

Webで生きる道を模索するブログ

アイコンWebフォント「Font Awesome」が簡単に導入できて便利!

      2015/05/14

fontawesome

アイコンWebフォントについて調べていて
「Font Awesome」という便利なものをみつけたので
自分の勉強がてらご紹介します。

アイコンWebフォントとは

「アイコンWebフォント」を使用すると
Webページ上で画像ではなくテキストとして
ベクター形式のアイコンを簡単に表示することができます。
Retinaディスプレイでも綺麗に表示されるうえ、導入は簡単です。

テキストなので、CSSを使って拡大・縮小が綺麗にできる上に、
文字色・背景色を指定するだけでアイコンの色を自由に変えることができます。

Webフォントとは

ウェブサーバ上に置かれたフォントファイルを
まるごとDLして表示に利用する、CSS3の機能です。
閲覧者の環境にあらかじめフォントがインストールされている必要がないため、
望みのフォントを表示に使えるメリットがあります。

Font Awesomeの使い方

「アイコンWebフォント」の種類はたくさんありますが
その中でも500種類を越える豊富なアイコンがフォントとして用意された
「Font Awesome」というフォントセットがオススメです。

ファイルをDLして設置するかCDNを利用するか

この「Font Awesome」は、CDNサーバ上に置かれているため、
たった1行のlink要素をHTMLに追記するだけで利用できます。
わざわざファイルをDLして、自サイト上に設置する必要はありません。
※自サイト上に設置したければ、
 フォントファイルをDLして設置することも可能です。

「Font Awesome」を利用したいHTMLのhead要素内に、
以下のlink要素を追記します。

これで「Font Awesome」を使う準備は完了です。

ライセンスについて

いくつかサイトをみて回りましたが
ライセンスに関してはリンク先を読めとうながすサイトばかりで
簡潔に教えてくれるサイトがなく、英語が苦手な僕にとって辛かったですが
調べた情報をざっくりいうと・・・

①DLしたファイルを使用する場合は使用するCSSにライセンスがかかれているので
それを消さずに、そのまま使えばOK

②CDNを利用する場合はライセンスを気にしなくても大丈夫っぽい

あくまで僕の認識なので、念のためラインセンスのリンクも張っておきます。
ご心配な方はお読みください

Font Awesome License

アイコンの表示方法

アイコンの表示方法はいくつかありますが、
i要素にclass属性を指定する方法が簡単です。
「fa」というclass名を必ず指定した上で、
「fa-check」など各アイコンに割り振られたclass名を指定します。

上記のソースを表示させると、
下図のようにアイコンが見えます。

 チェックアイコン
 コメントアイコン
 ハートアイコン

このように、class属性の値に指定の名称を記述することで、
様々なアイコンを表示できます。
i要素以外の他の要素を使っても大丈夫です。

アイコンの種類と記述CSS一覧

表示できるアイコンと、それを表示するために記述するclass名の一覧は、
「Font Awesome」サイト内の「The Icons」ページに掲載されています。
ここから、使用したいアイコンをお探し下さい。

ブロック要素にも使用できる

インライン要素に限らず、ブロックレベル要素にも使用できます。
以下のようにp要素に加えると、段落の先頭にアイコンが付加されます
(ただし、「Font Awesome」側のCSSによって、
対象の要素はすべて「inline-block」として表示されるので注意して下さい)。

 星アイコン

「Font Awesome」のCSSでは、:before擬似要素とcontentプロパティを使って、
「要素の内容の先頭」に挿入する形でアイコンの表示が実現されています。

IllustratorやPhotoshopでも使える

デザインカンプを作る時はIllustratorやPhotoshopなどの
グラフィックソフトを使用すると思いますが、
その時に、Font Awesomeのアイコンが使えたら便利ですよね!

Font AwesomeのサイトでファイルをDLすると中に
「FontAwesome.otf」ファイルがありますので、
こちらをインストールすれば、フォントとしてソフト上で使用できるようになります。

今までアイコンWebフォントを使用したことがなかったのですが
これからはガンガン活用していきたいと思います。

 - Webサイト制作

  関連記事