2017/10/11

無料で使える!Font Awesomeで楽してWeb上にアイコンフォントを指定

cssを読み込むだけでWebアイコンが使えるようになるFont Awesomeの使い方と活用方法を書いていきます。

Font Awesomeとは

Font AwesomeはアイコンをWebフォントとして利用できるようにしたものです。テキストとしてWeb上に表示させているのでCSSでカラーを変更や、font-weightやfot-sizeで好きなようにアイコンの表示を調整できるのもうれしいですね。

自身のサーバーに入れなくても使える

画像でアイコンを表示させる場合、まずアイコンを作成して、サーバー上にアップ、cssのbackgroundなどで任意の場所に表示と結構めんどうなんですが、Font AwesomeならCNDでcssを読み込むだけで簡単にアイコンの表示が可能になります。

Font Awesomeの準備

Font Awesomeを使用するときはCNDで読み込む方法と、ファイルをダウンロードする方法があります。

1_CNDで読み込み

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

CNDで読み込む場合は、上記のコードを

<head></head>

内に貼り付けるだけで利用できるようになります。本当に手軽なので、ほとんどの場合はCNDで読み込みがおすすめです。

関連 : CNDとは

2_必要なファイルをダウンロードし、サーバーにアップ

必要なファイルをダウンロードする為、Font Awesomeの公式サイトへアクセスします。

公式 : Font Awesome

Font Awesomeトップにある、Downloadをクリックすると、下記画像のポップアップが表示されるので

無料版をダウンロードする場合

No thanks,just download Font Awesome 4をクリックしてデスクトップなどにファイルをダウンロード。

ダウンロードが完了したらzipファイルを解凍

し、中にあるfont-awesome.min.cssを自身の利用したいWebサーバー上にアップしましょう。

アップロードしたら、読み込む為、内にリンクを記載

link href="〇〇〇/css/font-awesome.min.css" rel="stylesheet"

※〇はアップロード先により任意で変更・

Font Awesomeの使い方

Webアイコンを使用するにはHTMLに使いたいアイコンのコードを直接記載することで使えるようになります。

まずはFont Awesomeから使用したいアイコンを探します。

htmlにタグを記述

上記赤枠の「ICONSを」クリックしてアイコンページに移動。

たくさんの使えるアイコンが表示されるので使いたいものを選択します。

例えばこの矢印を使用したい場合

<i class="fa fa-arrow-right" aria-hidden="true"></i>

とhtmlに書くことでと表示されるようになります。

cssでclassを記述

複数のclassにアイコンを適用させる場合はcssでFont Awesomeを利用する楽です。

例えばこのような

<ul>
<li>カテゴリ1</li>
<li>カテゴリ2</li>
<li>カテゴリ3</li>
<li>カテゴリ4</li>
</ul>

リストすべてに矢印を表示させる場合

<ul>
<li class="fa fa-arrow-right" aria-hidden="true">カテゴリ1</li>
<li class="fa fa-arrow-right" aria-hidden="true">カテゴリ2</li>
<li class="fa fa-arrow-right" aria-hidden="true">カテゴリ3</li>
<li class="fa fa-arrow-right" aria-hidden="true">カテゴリ4</li>
</ul>

アイコンを表示させたい要素にclassを直接書き込めば任意の場所にアイコンを表示させることができます。

まとめ

今回は、500種類を越える豊富なアイコンがフォントとして用意された「Font Awesome」の使い方をご紹介致しました。CSS3のWebフォント機能を使えば、様々なアイコンが望みのサイズ・配色で表示できます。ぜひ、活用してみて下さい。