【Cocoon】グローバルナビメニューに『アイコンフォント』をカスタマイズ!
2021.03.15
ヘッダーメニューにアイコンフォントをカスタマイズしたい!!
グローバルナビゲーションに【アイコンフォント】をカスタマイズすることができます。
①パターン
②パターン
お好きなデザインをカスタマイズしてください。
それではやり方をご紹介します。
アイコンフォントの設定
まずはアイコンフォントの設定をしていきます。
Font Awesome5をクリック
アイコンフォントを選ぶ
Font Awesome5のサイトからアイコンを選んでください。
無料(Free)版のみ表示するようにしています。
もし、なっていない場合は左にある(Free)をにチェックをしてください。
検索ツールバーに英単語を入力してください。
わたしはプロフィールのアイコンを探したいので【user】と入力しました。
検索して出てきたアイコンの中から赤枠のアイコンを選びます。
それをクリックします。
クリックしたらこの画面になります。
赤枠のアイコンコードをクリック。するとコピーされるのでこれで準備OKです。
①パターンのカスタマイズ方法
WordPressを開く
【外観】→【メニュー】の順番でクリック
タブをクリック
ナビゲーションラベルにアイコンコードを貼り付け
赤枠のようにカテゴリー名の前にコピーしたアイコンコードを貼り付けます。
見栄えの話ですが、半角スペースをあけた方がオススメです!!
メニュー保存をクリック
これで完成です!!
②パターンのカスタマイズ方法
アイコンを選んでコードをコピーしてください。
WordPressを開く
【外観】→【メニュー】の順番でクリック
表示オプションをクリック
【説明】にチェックを入れる
タブをクリック
ナビゲーションラベルにアイコンコードを貼り付け
説明にカテゴリー名を入力
メニュー保存をクリック
これで完成です!!
このようにアイコンフォントの色をかえることもできます。
やり方はこちらで紹介しています!!
【Cocoon】グローバルナビメニューに『アイコンフォント』をカスタマイズ!
"+t+""+v+""+">"}var u,c=e(42),f=e(64),a=e(59),p=e(48),s=e(66),l=e(39),y=(e=e(47),"prototype"),v="script",d=e("IE_PROTO"),b=function(){try{u=new ActiveXObject("htmlfile")}catch(t){}var t;b="undefined"==typeof document||document.domain&&u?function(t){t.write(i("")),t.close();var n=t.parentWindow.Object;return t=null,n}(u):((t=l("iframe")).style.display="none",s.appendChild(t),t.src=String("javascript:"),(t=t.contentWindow.document).open(),t.write(i("document.F=Object")),t.close(),t.F);for(var n=a.length;n--;)delete b[y][a[n]];return b()};p[d]=!0,n.exports=Object.create||function(n,r){var e;return null!==n?(o[y]=c(n),e=new o,o[y]=null,e[d]=n):e=b(),r===t?e:f(e,r)}},function(t,n,r){var e=r(5),o=r(41),i=r(42),u=r(10),c=r(65);t.exports=e?Object.defineProperties:function(t,n){i(t);for(var r,e=u(n),f=c(n),a=f.length,p=0;p
タイトルとURLをコピーしました