アイコンフォントはWebデザインやコーディングを行う上でお世話になることが多いですよね。一度使ってみるとその便利さに気づくのですが、初めて使うときはよく分からないと思っている人も多いのではないでしょうか。

今回は人気のアイコンフォントと使い方についてご紹介したいと思います。

スポンサーリンク

アイコンフォントとは


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

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

なんでわざわざフォント形式で利用するの?と思うかもしれませんが、そこがアイコンフォントの最も重要な特徴であり、フォント形式であることで様々なメリットがあります。

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

では、具体的なアイコンフォントのメリットについてご紹介していきたいと思います。

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

アイコンフォントはCSSで色やサイズを指定することができるので、同じアイコンでも大きさを変えたり、色を変えて利用することができます。

設定方法は通常のテキストにデザインを加える場合と同じように、font-sizeなどでテキストと同じようにサイズ指定をしたり、colorで色を指定したり、CSSで簡単にデザインを加工することがかのうです。フォントならではの良さを活かした、扱いやすいアイコンがアイコンフォントだと言えるでしょう。

ベクターデータなので修正が簡単

PNGやJPEGなどの画像をアイコンに使用する際は、サイズを調整してから書き出す必要があったり、書き出した後に色を変えられなかったり、何かと手間がかかってしまいます。また、PNGやJPEGはSVGと比べてサイズが大きいため、ファイルの数が増えてくるとページの読み込み速度にも影響してしまいます。

一方でアイコンフォントは書き出し作業なども特に必要がなく、基本的にベクターデータで作成されているためファイルサイズも気にせずに使用することができます。デザインに修正があった場合もCSSでの修正だけで済んでしまう場合が多いので、修正が簡単にできてデザイナーにとっては結構ありがたい特徴です。

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

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

アイコンデザインを差し替える場合も、いちいち画像を用意する必要がなく、クラス名を変更するだけで簡単に他のアイコンに変更することができます。

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

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

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

1. Font Awesome

Font Awesomeは最も有名なアイコンフォントです。色々なシーンで使えるアイコンフォントが用意されており、2017年の終わりにFont Awesome 5がリリースされ、現在では929種類の無料アイコンフォントを利用することができます。

Font Awesomeの使い方

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

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

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

2. Foundation Icon Fonts 3

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

Foundation Icon Fonts 3の使い方

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

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

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

3. Ionicons


モバイルアプリ開発のフレームワーク「Ionic」が提供しているアイコンフォントです。アプリのUIデザインに役立つようなアイコンが多く用意されているため、モバイルサイトやボタンのアイコンなどに使いやすいものがたくさんあります。

Ioniconsの使い方

IoniconsはCDNとフォントファイルのダウンロードとどちらも提供されています。ここでは、CDNで利用する方法をご紹介しておきます。

まず、下記のタグをhead内に記述してください。

次に、公式ページのアイコン一覧から利用したいアイコンを選択します。アイコンをクリックするとクラス名が表示されるので、下記のようにHTMLの表示したい場所に記述を追加しましょう。

これで表示は完了です!見た目を修正したい場合は、クラス名を追加してCSSで修正するようにしましょう。

スポンサーリンク

ダウンロード型

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

4. IcoMoon

IcoMoonはCDNはありませんが、好みのアイコンフォントをダウンロードして、Webサイト内で使用することができるサービスです。書き出しの形式はSVGやPNG形式、フォントファイル形式などから選択することができ、場面に応じて使い分けることができますね。

また、自分でSVG形式のファイルをアップロードし、アイコンフォント化して出力するという面白い機能も提供されています。オリジナルのアイコンフォントを使用したい場合は、IcoMoonがおすすめですね。

5. Ligature Symbols


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

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

Ligature Symbolsの使い方

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

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

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

6. Typicons


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

Typiconsの使い方

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

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

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

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

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

7. Genericons Neue


Genericons Neueは、WordPressの開発元によって提供されているフォントで、約100種類のフォントが用意されています。

Genericons Neueの使い方

Genericons Neueは他のアイコンフォントと違い、ヘッダータグ内にファイル読み込みのタグを記述する必要がありません。公式サイトで使いたいアイコンをクリックすると、下記のようなテキストが表示されるので、それをコピーしてHTML内に貼り付けて利用します。

パフォーマンスを最適化するためには、アイコン毎にファイル読み込みが発生するのはあまりよろしくありませんが、ヘッダータグ内にファイルへのリンクの記述が必要ないため、特定のページだけどうしてもアイコンフォントを利用したい場合には気軽に使えますね。

まとめ

今回は、人気のアイコンフォントサービスについて、使い方とともにご紹介しました。アイコンフォントは使ってみればとても便利でデザインの質も高めることができますが、デザイン初心者の間はなかなか自分から使う場面が少ないのではないでしょうか。

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

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

おすすめの記事