どうも、おもちです。
ブログののグローバルメニューの設定はできたけど、文字のみで、なんか物足りないと感じていませんか？
WEBアイコンフォント「FontAwesome」を利用してみましょう。
アイコン+文字でグローバルメニューを設定できます。
- グローバルメニューにアイコンを付けたい
- アイコンが思ったよりも小さいので大きくしたい
「FontAwesome」を利用して、グローバルメニューのアイコン設定をした私が解説します。
ブログのグローバルメニューにアイコンを表示させたい
「FontAwesome」を利用しましょう。Googleで検索してみましょう！
「FontAwesome」はWEBサイトやスマホアプリ用に使えるアイコンが揃っています。
無料のアイコンがほとんどなのですが一部有料というアイコンもあります。
無料のアイコンがほとんどなのですが一部有料というアイコンもあります。
Webアイコンフォントの使い方
「Font Awesom」にアクセスします
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
ヘッダーの「Icons」から使いたいアイコンを探して選択します
アイコンのコードを「コピー」します
コードをナビゲーションラベルに「貼り付け」します
完成です
アイコンを大きくするにはどうしたらいいの？
「FontAwesome」ではアイコンの大きさを変えることができます。サイズを変更したいときは、以下のコードをi class=”〜”内に書くことでサイズを大きくすることができます。
✔ノーマル
<i class="fas fa-home"></i>
✔fa-2x
<i class="fas fa-home fa-2x"></i>
✔fa-5x
<i class="fas fa-home fa-5x"></i>
好みのサイズに変更してみましょう！
最後までお読みいただきありがとうございました。
END
