アイコンフォントはWebデザインやコーディングを行う上でお世話になることが多いですよね。

一度使ってみるとその便利さに気づくのですが、初めて使うときはよく分からないと思っている人も多いのではないでしょうか。

今回はこれからアイコンフォントを使ってみようと思っているような方に向けて、人気のアイコンフォントとその使い方をご紹介したいと思います。

スポンサーリンク

アイコンフォントとは


アイコンフォントとは、その名の通りフォント形式で使用することができるアイコンファイルの事を言います。

アイコンはWebデザインを行う上で欠かせない要素であり、色々な場面で使用することができます。ボタンのラベルにしたり、メニューに表示したり、SNSアイコンをページに設置したりすることもできます。

なぜフォント形式なの?と思うかもしれませんが、フォント形式で保存されていることによるメリットは結構大きいです。では次に、そのメリットについて紹介したいと思います。

アイコンフォントのメリット

CSSでサイズや色を変更できる

アイコンフォントを使用すると、CSSで色やサイズを指定することができるので、ファイルを一度読み込んでしまえば色々なアイコンフォントを表示させることができます。

フォントファイルなので、font-sizeなどでテキストと同じようにサイズ指定をしたり、colorで色を指定したり、フォントならではの良さを活かした、扱いやすいアイコンがアイコンフォントだと言えるでしょう。

ベクターデータなので拡大しても粗くならない

PNGやJPEGなどの画像は使用する際に適切なサイズの画像を用意しないといけなかったり、使用する色にして書き出す必要がありますよね。

アイコンフォントなら基本的にベクターデータで作成されているため、サイズを気にせずに使用することができます。

普通の画像を使用しているとサイズ変更の際などに書き出しが必要となり、結構な手間となるため、サイズを拡大しても粗くならないというのは大きなポイントです。

クラス名を使って呼び出すだけなので簡単に使える

アイコンフォントの呼び出し方は色々な呼び出し方がありますが、一般的に使われているのがクラス名による指定です。pタグやiタグにフォント名を示すクラスを設定することで、簡単にアイコンを呼び出すことが可能です。

いちいち画像を書き出したり、ダウンロードしたりする必要もないので、手軽に使えるというメリットがあります。

CDNに対応しているアイコンフォント

まずはCDNに対応しているアイコンフォントをご紹介したいと思います。一般的にはフォントファイルを自分のサーバーに保存して使用しますが、CDNが利用できる場合は外部からファイルを読み込んでサービスを利用することができます。

外部サーバーのファイルを使用するため、自サーバーにファイルを置かなくても良かったり、呼び出しが簡単というメリットがありますが、CDNサーバーがダウンしてしまうと呼び出すことができなくなり、利用できなくなるというデメリットがある店も気をつけましょう。

Font Awesome


Font Awesomeは最も有名なアイコンフォントです。色々なシーンで使えるアイコンフォントが用意されており、Font Awesome4.7.0では675種類のアイコンフォントを使用することが可能です。

Font Awesomeの使い方

まずはCDNを使ってFont AwesomeのCSSを読み込みます。headerタグ内に下記のコードを挿入してください。

アイコンを表示したい箇所で、以下のように呼び出すとアイコンフォントを表示することができます。

こちらのアイコンの一覧から使用したいフォントを選択すると、表示するためのコードを取得できます。

Foundation Icon Fonts 3

Foundation Icon Fonts 3 はCDNを通してアイコンフォントを使用することのできるサービスです。283種類ものアイコンが用意されており、基本的なアイコンはこのサービスがあれば事足りるのではないでしょうか。

Foundation Icon Fonts 3の使い方

まずは、下記のコードをheadタグ内に記述します。

アイコンを使用したい箇所では、下記のように呼び出すだけでアイコンを使用することができます。

やはりCDNに対応していると呼び出しに必要なコードが少なくて済むので、より手軽に使用することができますね。

ダウンロード型

ここから先は、CDNではなく一度ファイルをダウンロードし、サーバーにファイルをアップロードして使うタイプのアイコンフォントをご紹介したいと思います。

IcoMoon

IcoMoonはCDNはありませんが、好みのアイコンフォントをダウンロードして、Webサイト内で使用することができるサービスです。

書き出しの形式はSVGやPNG形式、フォントファイル形式などから選択することができ、場面に応じて使い分けることができますね。

SVG形式のファイルは拡大しても画像が粗くならないため、アイコン画像ではよく使用されるファイル形式です。

Ligature Symbols


Ligature SymbolsはKazuyuki Motoyamaさんというクリエイターの方が公開しているアイコンフォントです。

シンプルなアイコンが数多く掲載されているため、ボタンのラベルなどにアイコンを使いたい時に活躍しそうですね。

Ligature Symbolsの使い方

サンプルにあるように、headタグ内に下記のコードを挿入し、ダウンロードしたファイルの中からstyle.cssとその他のファイルをアップロードしてください。

Ligature Symbolsのアイコンフォントを表示させたい箇所では、下記のように呼び出すと表示することができます。

もしこれで表示されない場合は、style.css内の↓の部分のファイルが揃っているか確認しましょう。

Typicons


Typiconsは336種類の様々なアイコンフォントが用意されているサービスです。基本的な記号から、ボタンやラベルに使えそうなアイコンまで用意されています。

Typiconsの使い方

まずは、headタグ内に下記のコードを挿入します。この時、ダウンロードしたファイルのパスを間違えないように記述してください。

上記のCSSファイルの中に、下記のようなコードが書かれています。

このコードのそれぞれのファイルが、アップロードした場所を参照していることを確認してください。ここを間違って上手く表示されない人が結構多いです。

そして、実際にアイコンフォントを表示させたい箇所では下記のように記述します。

最初のファイルアップロードの所が少し手間ですが、それが済んでしまえば簡単にアイコンフォントを使用することができますね!

まとめ

今回は、人気のアイコンフォントサービスについて、使い方とともにご紹介しました。

アイコンフォントは使ってみればとても便利でデザインの質も高めることができますが、デザイン初心者の間はなかなか自分から使う場面が少ないのではないでしょうか。

しかし、デザインに慣れていない時こそアイコンフォントのような素材を活かすことで、デザインについての知識を深めながら力を付けることができます。

同様に、Webフォントも使いこなせるようになるとデザインの質が上がりますよ!

ぜひアイコンフォントやWebフォントをデザインに取り入れてみてください。

スポンサーリンク

おすすめの記事