Webフォントとして「FontAwsome」を使う方法

投稿日：2016-06-10

FontAwesomeのアイコンをWebフォントとして使う

これまではタイトルやキャッチコピーなど文字をデザインする時にはグラフィック画像を用いて表現していました。しかし、最近ではWebフォントを使っているサイトが増えています。

Webサイトのテキストはディバイスにインストールしてあるフォントに依存します。WebサイトではCSSを使いフォントの指示をすることである程度はデザインを制御できますが完全ではありません。製作者側には最終的にどのように表示されているかは分かりません。

Webフォントはインターネット上にあるフォントをダウンロードしてWebサイトを表示します。ディバイスに指定されたフォントが無くてもネットに接続さえしていれば同じように表示できます。

いいことばかりのように見えるWebフォントですがやはりデメリットもあります。Webフォントのメリットデメリットは以下のようです。

Webフォントのメリット	Webフォントのデメッリト
デザイン性がある美しく読みやすいネットに接続さえしていれば同じ表示になる	有料サービスが多く費用が掛かる大量のテキストでは表示するまでに時間がかかるフォントの指定が複雑ブラウザによっては使えない

使う場所を限定すれば利用価値は上がります。これからもっと普及することで経費的にも使いやすくなるでしょう。

FontAwesomeはアイコンをフォントとして表示できるWebフォントです。アイコンを画像ではなく文字として扱うことができるので拡大による劣化が起こりません。

500を超える種類のアイコンが用意されているので使いたいアイコンが見つかります。使い方を覚えてWebサイトで活用します。

FontAwesomeはフォントをダウンロードしてサーバーに組み込んで使う方法もありますが、Webフォントとして使う方法の方が簡単なのでそちらの手順を説明します。

HTMLのhead要素にCSS読み込みタグを埋め込む
下のタグを埋め込みます。

http://fontawesome.io/icons/でアイコンを検索します。

使いたいアイコンのタグをコピーします。

表示したい箇所に先ほどのコードをペーストする。

選択したアイコンはfa-globe　　

以上でアイコンを使用できます。

FontAwesomeのアイコンをWebフォントとして使う方法は簡単です。アイコンが統一されるとデザイン性も上がります。多くのアイコンが用意されているので使い方を覚えてWebサイトで活用します。