アイコンは情報をわかりやすく伝えるデザインの1つです。ホームページを見やすくするためにいろんなところでアイコンは使用されています。ですがアイコン画像を多用するとどんどんページが重くなってしまいます。そんなときに便利なのが「アイコンフォント」です。そのアイコンフォントの中でももっとも有名な「Font Awesome」について解説いたします。
そもそもアイコンフォントってなに？
アイコンフォントとは、その名の通り「アイコンを扱えるWEBフォント」です。フォント1文字に対して、テキストではなくアイコンが割り当てられています。例えば「あ」や「い」が「」や「」に割り当てられているイメージです。アイコンフォントはWebデザインで欠かせない要素です。では普通の画像アイコンに対してどのようなメリットがあるのでしょうか？
アイコンフォントを使うメリット
- ベクターデータなのでアイコンを拡大しても、ぼやける心配がない
- ほとんどの場合、画像を扱うより軽量
- CSSで色を変更したり、テキストとサイズをそろえることができる
- アニメーションも適用できる
さまざまなメリットがありますね。では続いてアイコンフォントの定番サービス「Font Awesome」をご紹介します。
Font Awesomeとは
Font Awesomeとは定番のアイコンフォントサービスです。もちろん無料です。商用利用もできます。無料でアイコンの数はなんと1,341個（2018年9月現在）。そしてSQUARESPACEなどのクラウド型ホームページ・ビルダーを使用する際に必要な「CDN」が用意されています。
CDNとは
CDNとは、コンテンツ・デリバリー・ネットワーク（Contents Delivery Network）の略称です。
ここでは「ネット上のアイコンフォントを読み込む」と考えてください。つまり、自分のサイトにアイコンをアップロードせずに、ネット上に置かれたアイコンを使用します。では続いてSQUARESPACEでの使用方法を説明していきます。
アイコンフォントの使用方法
アイコンフォントを使用する際の流れはこのようになります。
- CDNを設置する
- アイコンフォントを配置する
かんたんですね。それぞれ順を追って説明いたします。
1.CDNを設置する
ページ上部にある「How to Use」をクリックするか、下のURLを開いてください。
https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css
記載されているCDNコードをコピーしてください。
例：<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
SQUARESPACEの編集画面を開いてください。
トップ画面より 「Settings」 > 「Advanced」 > 「Code Injection」の中の「HEADER」内へ先程のCDNコードを貼り付けたあと、「SAVE」してください。
アイコンフォントを配置する
アイコンフォントを使用する準備は整いましたので、続いては実際に設置する方法を解説します。
Font Awesomeのページへ戻ります。ページ上部にある「Icons」をクリックするか、下のURLを開いてください。
https://fontawesome.com/icons?d=gallery
左メニューから「Free」を選択して、無料アイコンのみを表示させます。
これだけのアイコンが無料で使用できます。使用したいアイコンをクリックしてください。
今度はSQUARESPACEの編集画面へ戻ります。コードで設置するので「Text」「Markdown」は使用できません。アイコンフォントを使用する場合は「Code」を選択してください。
コードを設置すると、アイコンが表示されているのが分かると思います。もしプレビューされない場合は「SAVE」してページを再読込してみてください。このように好きな場所へいくつでもアイコンを追加できるようになりました。
【番外編】アイコンフォントでできること
「アイコンフォント」は「フォント」と同じ扱いです。上の動画のように、色やサイズを変更すると、タグで囲まれているテキストと同じように変更されますので便利ですね。
まとめ
アイコンフォントを活用して、画像を多用せずに見やすいサイト作りを目指しましょう。
