[WordPress]グローバルナビのメニューにアイコンを表示する

メニューにアイコンがついているサイトをよく見かけるですがあれかわいいですね。かわいいサイトを目指しているのでどうやるのか調べてみました。

すげーカンタンだったのでカンタンに紹介します。

参考にしたのはこちらの記事です。

グローバルメニューにアイコンを表示させる方法【simplicityカスタマイズ】

プラグイン「Font Awesome 4 Menus」のインストール

最初に「Font Awesome 4 Menus」というプラグインをインストールします。

WordPressの[プラグイン]>[新規追加]からインストールできます「Font Awesome 4 Menus」で検索してください。

「今すぐインストール」でインストールして「有効化」します。

Font Awesomeでアイコンを探す

「Font Awesome」というサイトに大量のアイコンがあるので検索して探します。

Icons | Font Awesome

検索窓にキーワードを入れて検索します。

今回は「home」と入れてみます。

検索されたアイコンが表示されます。今回は左上のアイコンを使うことにします。

アイコンのクラス名の取得

アイコンをクリックするとクラス名が表示されますので、それをコピーします。

今回のアイコンでは「fas fa-home」がクラス名です。

WordPressでメニューにクラスを設定する

WordPressの[外観]>[カスタマイズ]で[メニュー]を選択して、歯車マークで詳細メニューを表示して「CSSクラス」にチェックを入れます。

アイコンを表示するメニューを選択して「CSSクラス」に先ほどコピーしたクラス名を入力します。

以上でメニューにアイコンが表示されるようになります。

「Font Awesome」には他にもたくさんアイコンがあるので希望のアイコンを探してみてください。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする