ブロギングライフ

ブログサイト運営関連、AdSenseについての情報などを発信しています。

Font Awesomeアイコンをサイトのメニューに追加する方法

Font Awesomeアイコンをサイトのメニューに追加する方法

本サイトは、現状、カテゴリー数が少ないこともあって、メニューのアイテム数が少なめです。少し寂しい感じがしたので、Font Awesomeのアイコンをメニューのアイテム名に追加しました。

メニューアイテムにFont Awesomeアイコンを追加

メインメニューの設定については、以下の記事をご参照下さい。

https://www.blogging-life.com/how-to-setup-main-menu/

Font Awesomeアイコンをメニューバーのアイテム名に追加する方法

メニューにFont Awesomeを追加するプラグイン、Font Awesome 4 Menus をインストールし、有効化します。

Font Awesome 4 Menus バナー

WordPress管理画面左のメニューから、[外観]を選んで[メニュー]をクリックします。

WordPress外観のサブメニュー

メニュー編集画面の右上に表示されている”表示オプション”をクリックします。

メニュー編集表示オプションをクリックする

表示されるアイテムの中の[CSS Class]をチェックします。

メニュー編集オプションからCSSクラスを選択する

メニューアイテムのタブをクリックします。CSS class(オプション)の欄に、Awesome Fontのクラス名を追加します。

例:”ホーム”のラベル名の前にホームアイコンを追加する場合は、CSS classにfa-homeを入れます。

Font AwesomeのクラスをCSS class オプション欄に入力する

Font Awesomeのアイコン名(クラス名)は、Font Awesomeのアイコンリストのページの名前の前にfa-を加えます。

アイコン表示のオプション

 

ラベル名の後にアイコンを表示

”fa-アイコン名”の後に、”fa-after”を追加します。

メニュー項目名の後にFont Awesomeアイコンを表示

アイコンを大きくする

”fa-アイコン名”の後に、”fa-fw fa-2x”を追加します。

Font Awesomeアイコンを拡大

アイコンをスピン表示する

Font Awesomeのアイコンをスピン(回転)表示させたい場合は、”fa-アイコン名”の後に、”fa-spin”を追加します。

Font Awesome 4 Menusの設定を変更する

Simplicityでは、Font Awesomeのスタイルシートをロードしているので、重複ロードを避けるため、Font Awesome 4 Menusではスタイルシートをロードしない設定に変更します。

WordPress管理画面のメニューから、[設定]をクリックして、サブメニューのFont Awesomeを選択します。

Load Font Awesome 4 From: (どこからロードするかの選択設定)の中から、”Don’t load Font Awesome 4’s stylesheet (use if you load Font Awesome 4 elsewhere on your site)”を選択します。(Simplicityでロードしたスタイルシートを使用します。)

Font Awesome 4 Menusの設定を変更する

設定は、以上です。

メニューにアイコンが加わると印象が少し変わります。よろしければ、試してみて下さい。

記事内でもFont Awesome アイコンを使えます!

本記事で紹介したプラグインのショートコードを使用して、記事やページでもFont Awesomeのアイコンを使うこともできます。使い方は以下の記事をご参照下さい。

https://www.blogging-life.com/adding-font-icon-in-post/

コメントを残す(承認後表示されます)

*
*
* (公開されません)

Return Top