◆無料!でかんたんに口座の開設ができます!◆

コインチェック

詳細はこちら

【FontAwesome】グローバルメニューにアイコン表示させる

hobby

どうも、おもちです。

ブログののグローバルメニューの設定はできたけど、文字のみで、なんか物足りないと感じていませんか?

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.

ヘッダーの「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

関連記事【初心者向け】ブログにグローバルメニューを設定する方法を解説!