Webアイコンフォントは、気軽にWebサイト上でアイコンを表示するための便利なサービスです。
画像をたくさん表示してしまうと、ページ読み込み速度に影響してしまいますが、Webアイコンフォントであればファイルサイズをほとんど気にせずに済みます。
今回は、2020年現在のおすすめWebアイコンフォントサービスをご紹介したいと思います。
INDEX
Webアイコンフォントとは
Webアイコンフォントとは、HTMLのタグや特有のクラス名を付与することで、簡単にWebサイト上にアイコンを表示できるサービスです。
フォントとしてアイコンを利用することができるので、CSSで簡単にサイズや色を変更できるため、使い勝手にも優れています。
アイコンはWebデザインを行う上で欠かせない要素であり、色々な場面で使用することができます。ボタンのラベルにしたり、メニューに表示したり、SNSアイコンをページに設置したりすることもできますね。
アイコンフォントを使用するメリット
では、アイコンフォントを使用する具体的なメリットについてご紹介していきたいと思います。
CSSでサイズや色を変更できる
アイコンフォントは、CSSで色やサイズを指定することができるので、同じアイコン素材でも、簡単に大きさを変えたり、色を変えることができます。
設定方法は通常のテキストにデザインを加える場合と同じように、font-sizeなどでテキストと同じようにサイズ指定をしたり、colorで色を指定したり、CSSで簡単にデザインを加工することができます。
フォントならではの特徴を活かした、扱いやすいアイコン素材であることがアイコンフォントを使用する大きなメリットの1つです。
ファイルサイズを抑えられる
PNGやJPEGなどの画像をアイコンに使用する際は、サイズを調整してから書き出す必要があったり、書き出した後に色を変えられなかったり、何かと手間がかかってしまいます。また、PNGやJPEGはSVGと比べてファイルサイズが大きいため、ファイルの数が増えてくるとページの表示速度にも影響してしまいます。
一方で、アイコンフォントは書き出し作業なども特に必要がなく、ファイルサイズも小さいのでページ表示速度への影響を気にせずに使用することができます。
クラス名などで簡単に呼び出せる
アイコンフォントの呼び出し方は色々な方法がありますが、一般的に使われているのがクラス名による指定です。iタグなどにフォント名を示すクラスを設定することで、簡単にアイコンを呼び出すことが可能です。
アイコンデザインを差し替える場合も、いちいち画像を用意する必要がなく、クラス名を変更するだけで簡単に他のアイコンに変更することができます。
また、色やサイズの修正があった場合も、CSSの修正だけで済んでしまう場合が多いので、修正が簡単にできて実装時の調整を行いやすいというメリットがあります。
CDNに対応しているアイコンフォント
まずはCDNに対応しているアイコンフォントをご紹介したいと思います。
CDNとは、Web上に公開されているファイルを読み込むことでアイコンフォントを利用する方法のことで、自分のサーバー上にファイルを設置する必要がなく、headタグで呼び出すだけでアイコンフォントが利用できるようになります。
ただし、CDNサーバーがダウンしてしまうと呼び出すことができなくなり、アイコンフォントが表示されなくなってしまう点には注意が必要です。
1. Font Awesome
Font Awesomeは、Webアイコンフォントのサービスで真っ先に名前が挙がる人気のサービスです。
アイコンの種類も無料プランで約1,600種類、有料プランだと9,000種類以上のWebアイコンフォントを利用することができます。
世界中で多くの人がFont Awesomeを利用していて、FacebookやTwitterなど著名なサービスのロゴアイコンも用意されていて、SNSのシェアボタンを表示する時などにも活用できます。
Font Awesomeの使い方
Font Awesomeを利用するには、まずアカウント登録が必要です。無料で登録することができるので、まずはアカウントを作成しましょう。
アカウント登録が完了すると、下記のようなコードが出力されるので、そのままheadタグ内に貼り付けます。
|
1 2 3 |
<script src="https://kit.fontawesome.com/[Kitの文字列].js" crossorigin="anonymous"></script> |
アイコンを表示したい箇所で、以下のように呼び出すとアイコンフォントを表示することができます。
|
1 |
<i class="fab fa-facebook"></i> |
また、下記のようにCSSの疑似要素（::before, ::after）を使ってアイコンフォントを表示することもできます。
|
1 2 3 4 5 6 7 |
.icon::before { content:'\f35a'; font-family:'Font Awesome 5 Free' font-weight:900; } |
こちらのアイコンの一覧から使用したいフォントを選択すると、表示するためのコードを取得できます。
また、2020年後半にはFont Awesome 6も登場予定で、より幅広いWebアイコンフォントが利用できるようになる予定です。
2. Google Material Icons
Google Material Iconsは、Googleが提供するアイコン素材のサービスで、1,000種類以上のアイコン素材を無料で利用することが可能です。
UIデザインに使えるユーティリティ系のアイコン素材が多く、Webデザインのボタンなど、活用できる場面が非常に多いです。
Google Material Iconsの使い方
Google Material IconsをWebサイトで表示するためには、headタグ内に下記のコードを追加します。
|
1 |
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> |
アイコンを表示させたい場所で、下記のようにコードを追加すると、アイコン画像が表示されます。
|
1 2 3 |
<i class="material-icons">face</i> |
導入も表示も、とても簡単なので初心者の方にもおすすめです。
3. Foundation Icon Fonts 3
Foundation Icon Fonts 3 は、283種類のアイコンフォントを使用することのできるサービスです。
Foundation Icon Fonts 3の使い方
まずは、下記のコードをheadタグ内に記述します。
|
1 2 3 |
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet"> |
アイコンを使用したい箇所では、下記のように呼び出すだけでアイコンを使用することができます。
|
1 2 3 |
<i class="fi-widget"></i> |
fi-の後に、Foundation Icon Font 3のページに表示されているアイコン名を付けてクラス名に設定します。CDNに対応していると呼び出しに必要なコードが少なくて済むので、より手軽に使用することができますね。
4. Ionicons
モバイルアプリ開発のフレームワーク「Ionic」が提供しているアイコンフォントです。アプリのUIデザインに役立つようなアイコンが多く用意されているため、モバイルサイトやボタンのアイコンなどに使いやすいものがたくさんあります。
Ioniconsの使い方
IoniconsはCDNとフォントファイルのダウンロードとどちらも提供されています。ここでは、CDNで利用する方法をご紹介しておきます。
まず、下記のコードをheadタグ内に記述してください。
|
1 2 3 |
<script src="https://unpkg.com/ionicons@5.1.0/dist/ionicons.js"></script> |
次に、公式ページのアイコン一覧から利用したいアイコンを選択します。下記のようなHTMLが出力されるので、そのまま貼り付けるとアイコンを表示することができます。
|
1 2 3 |
<ion-icon name="heart"></ion-icon> |
ダウンロード型
ここから先は、CDNではなく一度ファイルをダウンロードし、サーバーにファイルをアップロードして使うタイプのアイコンフォントをご紹介したいと思います。
5. IcoMoon
IcoMoonはCDNはありませんが、好みのアイコンフォントをダウンロードして、Webサイト内で使用することができるサービスです。書き出しの形式はSVGやPNG形式、フォントファイル形式などから選択することができ、場面に応じて使い分けることができますね。
また、自分でSVG形式のファイルをアップロードし、アイコンフォント化して出力するという面白い機能も提供されています。オリジナルのアイコンフォントを使用したい場合は、IcoMoonがおすすめですね。
6. Ligature Symbols
Ligature SymbolsはKazuyuki Motoyamaさんというクリエイターの方が公開しているアイコンフォントです。
シンプルなアイコンが数多く掲載されているため、ボタンのラベルなどにアイコンを使いたい時に活躍しそうですね。
Ligature Symbolsの使い方
Ligature Symbolsを使うためには、まず公式サイトからファイルをダウンロードし、フォントファイルなどをアップロードしておきます。
Ligature Symbolsのアイコンフォントを表示させたい箇所では、下記のように呼び出すと表示することができます。
|
1 2 3 4 5 6 7 8 9 10 |
<p>Simple use for mailto link.</p> <a href="mailto:mail@example.com" class="lsf">mail</a> <p>Use tha icon with text.</p> <a href="http://twitter.com/" class="lsf-icon" title="twitter">Twitter</a> <p>Use tha icon with unicode.</p> <a href="http://amazon.com/" class="lsf-icon amazon">Amazon</a> |
CSSは下記のような記述を追加すればOKです。この時、フォントファイルの場所がアップロードされた場所と異なると正しく表示できないので、注意してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
@font-face { font-family: 'LigatureSymbols'; src: url('LigatureSymbols-2.11.eot'); src: url('LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'), url('LigatureSymbols-2.11.woff') format('woff'), url('LigatureSymbols-2.11.ttf') format('truetype'), url('LigatureSymbols-2.11.svg#LigatureSymbols') format('svg'); src: url('LigatureSymbols-2.11.ttf') format('truetype'); font-weight: normal; font-style: normal; } .lsf, .lsf-icon:before { font-family: 'LigatureSymbols'; -webkit-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; } .lsf-icon:before { content:attr(title); margin-right:0.3em; font-size:130%; } .lsf-icon.amazon:before { content: '\E007'; } |
7. Genericons Neue
Genericons Neueは、WordPressの開発元によって提供されているフォントで、約100種類のフォントが用意されています。
Genericons Neueの使い方
Genericons Neueは他のアイコンフォントと違い、ヘッダータグ内にファイル読み込みのタグを記述する必要がありません。
公式サイトで使いたいアイコンをクリックすると、下記のようなテキストが表示されるので、それをコピーしてHTML内に貼り付けて利用します。
|
1 |
<svg class="genericons-neue genericons-neue-month" width="16px" height="16px"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="genericons-neue.svg#month"></use></svg> |
すべてのフォントファイルをを読み込む必要が無いので、ちょっとしたアイコンの使用には便利かもしれません。
まとめ
Webアイコンフォントは使ってみればとても便利でデザインの質も高めることができますが、デザイン初心者の間はなかなか自分から使う場面が少ないのではないでしょうか。
特にFont AwesomeやGoogle Material Iconsは使用する機会も多く、とても便利なサービスなので使いこなせるようにしておくと何かと便利です。
デザインに慣れていない時こそアイコンフォントのような素材を活かすことで、デザインについての知識を深めながら力を付けることができます。Webフォントも合わせて使いこなせるようになるとデザインの質がさらに向上しますね。
ぜひアイコンフォントやWebフォントをデザインに取り入れてみてください。
