【有用】Webアイコンフォントを使う方法

Webアイコンフォントって何？

Webフォントとは、Webサーバー上にアップロードされているフォントのことです。

そしてWebアイコンフォントとは、アイコンを表現するためのWebフォントです。

Webサイトを閲覧するとき、閲覧するパソコンにCSSで指定されているフォントがインストールされていない場合、別のフォントを代わりに使って表示することになります。

しかし、Webフォントを使うことで、すなわちフォントのデータをWebサーバーからパソコンにダウンロードすることで、パソコンにインストールされていないフォントが指定されていても、文字を表示させることができるのです。

Webフォントとは、インターネット上で提供されているフォントや、予めサーバ上に置かれたフォントのことを指します。

フォントはもともと、「文字」を表示させるためのファイルですが、「文字」ではなく「アイコン」の情報を割り当てたものです。

CSSって何だっけ？という方はこちらをご覧ください。

【基本】CSS（カスケーディングスタイルシート）って何？

CSS（シーエスエス）とは、「カスケーディングスタイルシート」と呼ばれるもので、Webサイトのレイアウトやデザインなど「見た目」を操作・制御するための言語のことです。

wakaru-web.com

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

アイコンを表現するためなら、Webアイコンフォントを使わなくてもJPGやGIFなどの画像でも良いと思うかもしれません。

しかし、Webアイコンフォントには、画像を使う場合と比べて2つの大きなメリットがあります。

Webアイコンフォントのメリット1：大きさや色をCSSで変更できる

Webアイコンフォントは、あくまでも「フォント」なので、CSSで大きさや色を自由に変更させることができます。

通常のテキストと全く同じ方法で、大きさを変更する時は、「font-size」プロパティを使い、色を変更する時は「color」プロパティを使います。

Webアイコンフォントのメリット2：CSSのクラス名を指定するだけで簡単に使える

Webアイコンフォントを表示させるには、「文字」を入力して表示させる方法と、アイコンを表示したいところにCSSのクラス名を指定するだけの方法があります。

Webアイコンフォントは、それ自体が複数のアイコン情報を持つフォントファイルです。

つまり、いったんダウンロードしておけば、クラス名を変更するだけで、簡単に別のアイコンへと変更させることができます。

つまり、修正が簡単にできるのがWebアイコンフォントのメリットです。

Webアイコンフォントの代表格「Font Awesome」

Webアイコンフォントの定番が、「Font Awesome」です。約1500種類のアイコンが用意されており、様々な場面で使うことができます。

Font Awesomeは無料で使えますが、有料のPro版もあります。Pro版では、使えるアイコンの数が多いだけでなく、Pro版専用の書体が使えます。

Font Awesomの書体は、「線の太いSolid」「中くらいのRegular」「線が細いLight」の3つの種類があり、Solid書体は全てのアイコンにおいて無料で使えます。

なお、Regular書体はアイコンによりPro版か無料版のどちらかで使えます。Light書体はPro版限定です。

Font Awesomeの導入方法

Font Awesomeのアイコンを自分のWebサイトへ導入するには、主に以下の2つの方法があります。

1. CDN（コンテンツデリバリーネットワーク）を使う方法
2. Font Awesomeのデータを、Webサーバーにアップロードして使う方法

特別な事情がない場合は、CDNを使う方法がおすすめです。

CDNを使うことで、Webサイトのサーバーの容量を圧迫することもなく、場合によってはCDNのキャッシュ機能によりFont Awesomeのファイルの読み込みが速くなることもあるからです。

ここでは、「CDNを使う方法」と「フォントのデータをWebサーバーにアップロードする方法」の2つについて紹介します。

CDN（コンテンツデリバリーネットワーク）とは、Webサイトでよく使われているファイルを配布するための専用のネットワークのことです。詳しくはこちらをご覧ください。

【知識】CDN（コンテンツデリバリーネットワーク）って何？

CDN（コンテンツデリバリーネットワーク）とは、同一のコンテンツを多くの配布先やユーザーに効率的に配信するためのネットワークのことです。CDNを使うことで、Webサイトで使われてるデータの一部を複数の拠点から配信することができます。

wakaru-web.com

Font AwesomeをCDNで使う方法

Font AwesomeをCDNで使う方法は、非常に簡単です。

まず、Font Awesomeを使いたいWebサイトのheadタグの中に、以下のCSSを読み込みます。

【HTML】

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">

※後述しますが、v5.8.1はバージョン名なので、バージョンアップしたらこの部分を更新することが可能です。

基本的には、これだけで導入完了です。

Font Awesomeをダウンロードして使う方法

Font Awesomeを動作させるためのファイル一式をダウンロードして、WebサイトにあるWebサーバーにアップロードして使う方法です。

Font Awesomeのダウンロードページを開きます。

「Free for Web」のボタンをクリックします。zipファイルがダウンロードされるので、解凍します。

解凍すると、上記のようなファイル一式が表示されます。

このファイル一式を、一つのフォルダに入れてWebサーバーにアップロードしましょう。ここでは「fa」という名前のフォルダに入れることにします。

あとは、「CSS」フォルダに含まれている「all.css」を、linkタグで読み込むだけです。

具体的には、以下のようになります。

【HTML】

<link rel="stylesheet" href="./fa/css/all.css">

Font Awesomeの2つの使い方

Font Awesomeを使ってアイコンを表示させる方法は、以下の2つがあります。

1. HTMLの要素として表示させる方法
2. CSSのクラス名を指定して表示させる方法

HTMLに直接書く方法

最初に、HTMLの要素として表示させる方法を紹介します。

Font AwesomeのWebサイトから、使用したいアイコンを選択します。

今回は、中央付近にある「車いす」のアイコンを使うことにします。

アイコンをクリックすると、詳細画面が表示されます。ここで、「Start Using This Icon」のボタンをクリックしましょう。

アイコンを使うためのHTMLが、表示されます。ここでは以下のとおりです。

【HTML】

<i class="fab fa-accessible-icon"></i>

このHTMLを記述することで、ブラウザ上に車いすのアイコンが表示されます。

CSSのクラス名として指定する方法

Font Awesomeは、CSSのクラスとして設定することもできます。その場合は、以下のようなHTMLとCSSを記述します。

【HTML】

<span class="icon"></span>

【CSS】

.icon::before {
content:'\f019';
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size:300px;
color:#000;
}

CSSのクラス名として指定する場合は、before疑似要素を使って表示します。

実際のアイコンの文字情報は、contentプロパティの「\f019」の部分で設定します。contentプロパティに設定する値は、Font AwesomeのWebサイトから確認できます。

「f019」のような文字列は、「Unicode」と呼ばれる文字情報を識別するための記号のようなものです。

実際に、contentプロパティに書く時は、Unicodeの前に「\」をつけて設定します。「\」を付けることで、contentプロパティに設定した文字列が、Unicodeであることを表すことができます。

Font Awesomeがバージョンアップした時の対応方法

Font Awesomeは、バージョンアップをして扱えるアイコンの種類が増えることがあります。その際は、Webサイトで読み込んでいるFont Awesomeも修正する必要があります。

CDNで読み込んでいる場合は、headタグに記述されたlinkタグを修正する必要があります。

linkタグのhref属性の一部に、Font Awesomeのバージョンに関する文字列が含まれています。今回の例だと「v5.8.1」の箇所です。

Font Awesomeをバージョンアップした時は、この文字列（バージョン）を修正することで、Webサイトで使えるFont Awesomeもバージョンアップできます。

※バージョンが変わっても、そのバージョンまでのフォントは使えるので、使いたいフォントを指定してみて、それが旧バージョンになかった場合に新バージョンに記述を変えるのでも良いと思います。

また、ダウンロードして使っている場合は、新しいバージョンのFont Awesome一式をダウンロードして、運営しているWebサイトにアップロードしましょう。

他のWebアイコンフォント

Font Awesomeの他にも、Webアイコンフォントはいくつかあります。

Google Material Icons

Google Material Icons

Google Material Iconsは、Googleが提供しているWebアイコンフォントサービスです。1,000種類ほどのWebフォントアイコンが利用できます。

Font Awesomeと同じように使えるので、簡単に取り入れることが可能です。

Foundation Icon Fonts 3

Foundation Icon Fonts 3

Foundation Icon Fonts 3は、283種類のWebアイコンフォントが使えるサービスです。こちらも、Font Awesomeと同じような使い方で使用できます。

WebアイコンフォントをSVGで表現する

SVGを使う

Webアイコンフォントは、もともとフォントのデータです。

フォントはベクター画像なので、サイズを変更しても劣化して表示されることもなく、CSSの設定で自由に色の変更も可能です。

このような特徴を持つ画像フォーマットとして、SVGがあげられます。SVGは、GIFやJPN、PNGのような画像フォーマットの一つです。

画像なので、imgタグで表示できるだけでなく、CSSのbackgroundプロパティを使うことで、特定のHTML要素の背景画像として設定することも可能です。

imgタグで使う場合には、通常の画像と同じように、例えば以下のように記述します。

<img src="test.svg">

また、SVG専用の「パワートランスフォーム」と呼ばれる機能が使えます。具体的にはiタグに「data-fa-transform」の属性を追加して、アイコンの拡大縮小・回転などができます。

【参考】FONTAWESOME5の使い方

アイコンをSVGとJavaScriptで表示させる方法

先ほど紹介したFont Awesomeでは、アイコンをWebフォントではなく、SVGとJavaScriptを使って表現する方法を使うことができます。

以下、その手順を紹介します。

ちなみに、SVG画像は、ダウンロードしたFont Awesomeのフォルダの中の「svgs」にあります。

まず、Webページのheadタグにscriptタグを追加して、Font AwesomeのJavaScriptを読み込みます。

【HTML】

<script defer src=https://use.fontawesome.com/releases/v5.8.1/js/all.js></script>

そして、アイコンを表示させたい箇所にiタグを記述します。

【HTML】

<i class="fas fa-address-card"></i>

これで、SVGバージョンのFont Awesomeの使い方は以上です。

SVGバージョンのFont Awesomeを使う場合に、一つ注意したい点があります。

それは、HTMLのソースコードではiタグで記述しましたが、実際にブラウザで表示させると、JavaScriptによってiタグがsvgタグに置換されてしまうということです。

例えば先ほど、

【HTML】

<i class="fas fa-address-card"></i>

とHTMLを書きましたが、ブラウザの開発ツールで確認すると、以下のSVGタグに置換されています。

<svg class="svg-inline--fa fa-address-card fa-w-18" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="address-card" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-352 96c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm112 236.8c0 10.6-10 19.2-22.4 19.2H86.4C74 384 64 375.4 64 364.8v-19.2c0-31.8 30.1-57.6 67.2-57.6h5c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h5c37.1 0 67.2 25.8 67.2 57.6v19.2zM512 312c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-64c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-64c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16z"></path></svg>

つまりiタグが無くなるので、CSSでiタグに装飾を設定しても、SVGアイコンには適応されません。

この場合、もし色を変更したい場合は、色を設定するためのCSSを定義しておき、iタグのクラス属性に設定します。

CSSの定義が再現できる使い方

【CSS】

<style>
.red {
color:red;
}
</style>

【HTML】

<i class="fas fa-address-card red"></i>

クラス「red」によって、SVGアイコンが赤色に設定できます。

CSSの定義が再現できない使い方

【CSS】

<style>
i.red {
color:red;
}
</style>

【HTML】

<i class="fas fa-address-card red"></i>

これは「iタグのred」クラスになっているので、赤くなりません。