![](https://yukihone.com/wp-content/uploads/2020/02/4F543608-A979-42CE-89FC-95E16F3FB28D_1_201_a.jpeg)
- サイトをもっとお洒落にしたいけどいい方法ないかな…
- ヘッダーにアイコンを表示したいけどやり方が分からない…
そんな悩みを解決します。
あなたのサイトは他のサイトと差別化できていますか?ほとんどデフォルトではないですか?
ちょっとした一手間でサイトが一段にお洒落になるアイコンフォントについて紹介していきます!
- アイコンフォントとは
- ブログのヘッダーにアイコンを表示する方法
この記事を作成時点では Font Awesome4 を使用しています。
アイコンフォントとは
![アイコンフォントとは](https://yukihone.com/wp-content/uploads/2020/03/スクリーンショット-2020-03-18-21.56.54-800x252.jpg)
アイコンフォントとは画像のように文中にアイコンとして表示できるフォントのことです。
フォントが画像よりも読み込みが早く、文字と同じように扱えるのが特徴です。
関連記事【Cocoon】Font Awesome5でヘッダーにアイコンを表示する方法
Font Awesome4 とは
Font Awesome4 とは、お洒落なアイコンフォントと、そのアイコンフォントを一部無料で提供しているサイトを指します。
サイトはこちら→Font Awesome4
ブログのヘッダーにアイコンを表示する方法
![ブログのヘッダーにアイコンを表示する方法](https://yukihone.com/wp-content/uploads/2020/03/スクリーンショット-2020-03-18-21.56.54-800x252.jpg)
こちらの画像のようにサイトにヘッダーにアイコンをつける方法を解説します。
メニューを作成する
まだヘッダーメニューがない人はまずメニューを作成しましょう。
新規メニューを追加
![新規メニューを追加](https://yukihone.com/wp-content/uploads/2020/03/スクリーンショット-2020-03-18-23.24.10-800x92.jpg)
「外観」→「メニュー」→「新しいメニューを作成しましょう」をクリック!
メニューを追加
![メニューを追加](https://yukihone.com/wp-content/uploads/2020/03/スクリーンショット-2020-03-18-23.24.49-800x264.jpg)
「ヘッダーメニュー」など適当な名前を記入します。
左のチェック項目からヘッダーに追加したい項目を選び「メニューに追加」で追加。
Font Awesome4 を開く
無料アイコンフォントを提供している Font Awesome4 を開きましょう。
好きな画像を選ぶ
icon を選択
![iconを選択](https://yukihone.com/wp-content/uploads/2020/03/スクリーンショット-2020-03-18-23.13.49-800x324.jpg)
”Get Started→” をクリックしてしまいがちですが!違います!
画面上部にある ”icon” をクリックしてください。
アイコンを検索する
![アイコンを検索する](https://yukihone.com/wp-content/uploads/2020/03/スクリーンショット-2020-03-18-23.14.10-1-800x410.jpg)
こちらの検索ボックスに英語で検索ワードを入れます。
アイコンを貼り付ける
いよいよアイコンを貼りつける手順です。
コードを確認してコピー
![コードを確認してコピー](https://yukihone.com/wp-content/uploads/2020/03/スクリーンショット-2020-03-18-23.14.51-800x528.jpg)
アイコンの下部にある「<i class
」から始まるコードをコピーします。
メニューにコピー
![メニューにコピー](https://yukihone.com/wp-content/uploads/2020/03/スクリーンショット-2020-03-18-23.52.39-800x472.jpg)
メニューの画面に戻り、名前の前にコピーしたコードを貼り付けます。
そしてメニューを保存。
以上で完成です。
確認してみましょう。
ヘッダーにアイコンを表示する方法:まとめ
![ヘッダーにアイコンを表示する方法:まとめ](https://yukihone.com/wp-content/uploads/2020/02/B977CE1B-866B-44C9-BE6B-9553B50F4BFA_1_105_c-800x450.jpg)
アイコンをつけることはお洒落だけなく直感的に理解しやすくなり、他サイトと差別化できるのでおすすめです。
本ブログでは初心者ブログ応援のカテゴリーがあります。是非ご覧ください!
また、Cocoon専用のカスタマイズ講座もあります。こちらもご覧ください!