Web blog WEBブログ

Webアイコンフォント『Font Awesome』の使い方(準備編:CDN)

2018.04.24

こんにちは。コーダーの兼山です。

今回は、コーディング時に便利な、
Webアイコンフォント『Font Awesome』の使い方について、ご紹介します。

『Font Awesome』とは、
ウェブサイトなどでWebアイコンフォントを表示できるようにしてくれるサービスです。

画像ではなく、テキストとして認識されるため、
サイズ、カラー等、自由に変えられます。

レスポンシブコーディングなど、サイズの可変によって、画像のようにボケたりしないため、見た目も良くなります。

方法は、2つあります。
まずは、CDNを使う方法をご紹介します。

デモ

CDNとは?

CDNとは、「専用のサーバー上にあるデータ」を読み込んで自分のWebサイトに表示させる仕組みです。
データをダウンロードして自分のサーバーにアップロードしなくても使うことができます。

手順① 以下のコードをheadタグ内に貼付け

以下のコードを<head>~</head>の中に貼り付けます。

手順② Font Awesomeへアクセス

Font Awesomeへアクセスします。
Font Awesome
URL:https://fontawesome.com/

手順③ アイコンを探す

今回は、「angle-double-right」を例にします。

②でアクセスした、サイトのヘッダー内、『Icons』をクリックし、
リストの中から「angle-double-right」を探します。

※ 薄いグレイで表示されているアイコンは、「PRO(有料)プラン」でのみ使用できます。

手順④ コードをコピーし、目的の場所へ貼り付ける

③の操作で開いたページから、コード(下図、赤枠)をコピーし、
目的の場所へ貼り付けます。

これで、準備完了です。

まとめ

【この方法のメリット】
・Font Awesomeに新しいアイコンが追加されたときにダウンロードし直す必要がない。
・サーバーへの負荷を減らせる。
・メンテナンスが楽。

このようなサービスは、今後、使用頻度が高くなると思います。
是非、覚えておきたいですね。

次回、自分のサーバーにアイコンフォントのデータをアップロードして使う方法をご紹介します。

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア