Web制作には必須といえるアイコンですが、画像の一部を修正するだけなのに、いちいち画像編集ソフトを開き、デザインを修正する手間があります。手間を省く便利な機能があるのをご存知でしょうか？今回はアイコンフォントについてご紹介します。
目次
アイコンフォントとは？
アイコンフォントとは、Webフォントと同じように使用できるアイコンのことです。
Webフォントとは？
Webフォントを使用すると、特殊なフォントを使用し、WindowsやMacなど異なるデバイスから閲覧しても、同じフォントでサイトを見ることができます。
使用方法など、Webフォントの詳細については、Webフォントを使って、ワンランク上のサイト作りを！で紹介しているのでチェックしてみてください。
アイコンフォントもWebフォントと同じ原理で、簡単に使用することができます。
アイコンフォントのメリットとは？
アイコンフォントを使用することによって下記のようなメリットがあります。
ベクター形式であること
アイコンフォントはベクター形式のため、拡大縮小しても画像が荒れてしまうことはありません。
CSSで編集ができる
アイコンフォントは、テキストと同じようにCSSで編集することができます。例えば、テキストでよくつかう、font-sizeなども使用することができ、簡単に色やサイズを変更することが可能です。
画像のアイコンの場合、一番手間のかかる色や大きさの変更が、簡単にできるのは大きなメリットではないかと思います。
最新情報をいち早くお届け!
無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます！
その他、更新情報・イベント情報を
お届けいたします。
アイコンフォントを使用してみよう
実際にアイコンフォントを使用してみましょう。
アイコンフォントは有料だけでなく、無料で提供されているものもあります。サイトの規約をしっかり読んで、利用してみましょう。
今回は、アイコンフォントを提供しているFont Awesomeを使用してみます。
Font Awesomeとは？
Font Awesomeとは数千点以上のアイコンをアイコンフォントとして使用できるサービスです。シンプルなデザインで、どんなサイトにも合うかと思います。下記からCDNを使ったFont Awesomeの使い方を説明します。
1.CDNを使う
Font Awesomeを利用するには、CDNを使う方法と、ダウンロードしサーバーに置いて使用する2パターンがあります。
今回はCDNを使用します。CDNはネット上にアップされているデータを使用します。
ファイルをダウンロードし、サイトのサーバーにアップする必要がないので、手間がかかりません。
手軽にFont Awesomeを利用することができます。
2.サイトのHTMLに読み込ませる
TOPページの上部メニューのStartをクリックすると、コードが書いてあるページが開きます。コードをコピーし、HTMLのhead内に入れ込みます。
3.アイコンを表示させる
TOPの上部メニューのIconをクリックすると、アイコン一覧ページに繋がります。一覧ページから使いたいアイコンをクリックし、右下の「Start Using This Icon」をクリックします。
ポップアップ表示内に、iclassから書かれているコードがあります。こちらをコピーしサイトのbody内に貼り付けることで、アイコンを表示させることができます。
4.アイコンの大きさを変える
Font Awesomeにはclassを追加するだけで、大きさの変更が可能です。Sizing Iconsに詳細が書かれているように、アイコンのclassの後にfa-2xなどを追加するだけで簡単に大きさが変わります。
他にもアニメーションを追加したり、クラスを追加することで色を変更することも可能です。
オリジナルのアイコンフォントを作成
自分で作成したアイコンをアイコンフォントにできたら便利ですよね。
オリジナルのアイコンフォントを作成することも可能です。
CDNを使用せず、ダウンロードのみのアイコンフォントです。アイコンフォントを利用できるだけでなく、オリジナルのアイコンフォントを作成することが可能です。オリジナルのアイコンフォントを作成したい方にはおすすめのサービスです。
使用したいアイコンのSVGファイルを作成し、インポートするだけで簡単にオリジナルのアイコンフォントを利用することができます。IcoMoonには通常のアイコンフォントも用意されているので、欲しいものが足りない時などに、オリジナルのアイコンフォントを作成してみると、制作の幅が広がるのではないかと思います。
アイコンフォントを利用することによって
アイコンフォントには、サイトの見栄えだけでなく、制作の手間を省くことができる要素が含まれていることが分かりました。また、オリジナルのアイコンフォントを作成することで、アイコンをサイトの雰囲気に合わせることもできます。積極的に利用し、制作の効率をアップしていきたいです。
マーケティングでお悩みでしたら、
Bigmacにお任せください。
