SQUAPESPACEでアイコンフォントFont Awesomeを利用できるようにする方法

アイコンは情報をわかりやすく伝えるデザインの1つです。ホームページを見やすくするためにいろんなところでアイコンは使用されています。ですがアイコン画像を多用するとどんどんページが重くなってしまいます。そんなときに便利なのが「アイコンフォント」です。そのアイコンフォントの中でももっとも有名な「Font Awesome」について解説いたします。

そもそもアイコンフォントってなに?

アイコンフォントとは、その名の通り「アイコンを扱えるWEBフォント」です。フォント1文字に対して、テキストではなくアイコンが割り当てられています。例えば「あ」や「い」が「」や「」に割り当てられているイメージです。アイコンフォントはWebデザインで欠かせない要素です。では普通の画像アイコンに対してどのようなメリットがあるのでしょうか?

アイコンフォントを使うメリット

  • ベクターデータなのでアイコンを拡大しても、ぼやける心配がない
  • ほとんどの場合、画像を扱うより軽量
  • CSSで色を変更したり、テキストとサイズをそろえることができる
  • アニメーションも適用できる

さまざまなメリットがありますね。では続いてアイコンフォントの定番サービス「Font Awesome」をご紹介します。

Font Awesomeとは

Font Awesome

https://fontawesome.com/

Font Awesomeとは定番のアイコンフォントサービスです。もちろん無料です。商用利用もできます。無料でアイコンの数はなんと1,341個(2018年9月現在)。そしてSQUARESPACEなどのクラウド型ホームページ・ビルダーを使用する際に必要な「CDN」が用意されています。

CDNとは

CDNとは、コンテンツ・デリバリー・ネットワーク(Contents Delivery Network)の略称です。

ここでは「ネット上のアイコンフォントを読み込む」と考えてください。つまり、自分のサイトにアイコンをアップロードせずに、ネット上に置かれたアイコンを使用します。では続いてSQUARESPACEでの使用方法を説明していきます。

アイコンフォントの使用方法

アイコンフォントを使用する際の流れはこのようになります。

  1. CDNを設置する
  2. アイコンフォントを配置する

かんたんですね。それぞれ順を追って説明いたします。

1.CDNを設置する

Font AwesomeのCDN

ページ上部にある「How to Use」をクリックするか、下のURLを開いてください。

https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css

Font AwesomeのCDNをコピー

記載されているCDNコードをコピーしてください。

例:<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

SQUARESPACEへCDNを貼り付ける

SQUARESPACEの編集画面を開いてください。

トップ画面より 「Settings」 > 「Advanced」 > 「Code Injection」の中の「HEADER」内へ先程のCDNコードを貼り付けたあと、「SAVE」してください。

アイコンフォントを配置する

アイコンフォントを使用する準備は整いましたので、続いては実際に設置する方法を解説します。

アイコン設置方法

Font Awesomeのページへ戻ります。ページ上部にある「Icons」をクリックするか、下のURLを開いてください。

https://fontawesome.com/icons?d=gallery

Freeを選択

左メニューから「Free」を選択して、無料アイコンのみを表示させます。

コードをクリップボードへコピー

これだけのアイコンが無料で使用できます。使用したいアイコンをクリックしてください。

Codeを選択

今度はSQUARESPACEの編集画面へ戻ります。コードで設置するので「Text」「Markdown」は使用できません。アイコンフォントを使用する場合は「Code」を選択してください。

コードを挿入

コードを設置すると、アイコンが表示されているのが分かると思います。もしプレビューされない場合は「SAVE」してページを再読込してみてください。このように好きな場所へいくつでもアイコンを追加できるようになりました。

【番外編】アイコンフォントでできること

カラーやサイズの変更

「アイコンフォント」は「フォント」と同じ扱いです。上の動画のように、色やサイズを変更すると、タグで囲まれているテキストと同じように変更されますので便利ですね。

まとめ

アイコンフォントを活用して、画像を多用せずに見やすいサイト作りを目指しましょう。

https://fontawesome.com/