Webアイコンフォントを使うことによって、Webサイトに簡単にアイコン素材をデザインに取り入れることができ、デザインの幅が広がります。

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

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

Webアイコンフォントとは

Webアイコンフォントとは、その名の通りフォントとして使用することができるアイコン素材のことを言います。単に「アイコンフォント」と呼んだりもします。

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

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

アイコンフォントを使用するメリット

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

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

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

設定方法は通常のテキストにデザインを加える場合と同じように、font-sizeなどでテキストと同じようにサイズ指定をしたり、colorで色を指定したり、CSSで簡単にデザインを加工することができます。

フォントならではの特徴を活かした、扱いやすいアイコン素材であることがアイコンフォントを使用する大きなメリットの1つです。

ファイルサイズを抑えられる

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

一方で、アイコンフォントは書き出し作業なども特に必要がなく、ファイルサイズも小さいのでページ表示速度への影響を気にせずに使用することができます

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

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

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

また、色やサイズの修正があった場合も、CSSの修正だけで済んでしまう場合が多いので、修正が簡単にできて実装時の調整を行いやすいというメリットがあります。

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

まずはCDNに対応しているアイコンフォントをご紹介したいと思います。

CDNとは、Web上に公開されているファイルを読み込むことでアイコンフォントを利用する方法のことで、自分のサーバー上にファイルを設置する必要がなく、headタグで呼び出すだけでアイコンフォントが利用できるようになります。

ただし、CDNサーバーがダウンしてしまうと呼び出すことができなくなり、アイコンフォントが表示されなくなってしまう点には注意が必要です。

1. Font Awesome

Font Awesomeは最も有名なアイコンフォントの1つで、様々な場面で使えるアイコンフォントが用意されており、多くの人がFont Awesomeを使ってアイコンフォントを表示しています。

2017年の終わりにFont Awesome 5がリリースされ、現在では1,500種類の無料のアイコンフォントを利用することができます。

Font Awesomeの使い方

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

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

また、下記のようにCSSの疑似要素(::before, ::after)を使ってアイコンフォントを表示することもできます。

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

Font Awesomeの詳しい使い方は下記のページでご紹介しています。

2. Google Material Icons

Google Material Iconsは、Googleが提供するアイコン素材のサービスで、1,000種類以上のアイコン素材を無料で利用することが可能です。

UIデザインに使えるユーティリティ系のアイコン素材が多く、Webデザインのボタンなど、活用できる場面が非常に多いです。

Google Material Iconsの使い方

Google Material IconsをWebサイトで表示するためには、headタグ内に下記のコードを追加します。

アイコンを表示させたい場所で、下記のようにコードを追加すると、アイコン画像が表示されます。

導入も表示も、とても簡単なので初心者の方にもおすすめです。

3. Foundation Icon Fonts 3

Foundation Icon Fonts 3 は、283種類のアイコンフォントを使用することのできるサービスです。

Foundation Icon Fonts 3の使い方

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

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

fi-の後に、Foundation Icon Font 3のページに表示されているアイコン名を付けてクラス名に設定します。CDNに対応していると呼び出しに必要なコードが少なくて済むので、より手軽に使用することができますね。

4. Ionicons


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

Ioniconsの使い方

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

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

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

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

ダウンロード型

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

5. IcoMoon

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

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

6. Ligature Symbols


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

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

Ligature Symbolsの使い方

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

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

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

7. Typicons


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

Typiconsの使い方

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

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

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

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

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

8. Genericons Neue


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

Genericons Neueの使い方

Genericons Neueは他のアイコンフォントと違い、ヘッダータグ内にファイル読み込みのタグを記述する必要がありません。

公式サイトで使いたいアイコンをクリックすると、下記のようなテキストが表示されるので、それをコピーしてHTML内に貼り付けて利用します。

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

まとめ

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

特にFont AwesomeやGoogle Material Iconsは使用する機会も多く、とても便利なサービスなので使いこなせるようにしておくと何かと便利です。

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

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

おすすめの記事