こんにちは。
ヘッダーに置こうとしたメニューバー。
cocoonの機能を駆使してアイコンと、短い文字のキャプションを付けたかったのですが、アイコンが思ったところに入らない~!
というわけで、
少し調整してみました。
今回の目標
・アイコンを良い位置にもってくる
・アイコンの下に文字を入れる
こんな感じに仕上がります。(右上のメニュー)
メニューにアイコンを入れる
メニューバー(グローバルナビ・ナビバー・ヘッダーメニュー)の設置方法が分からない!という方は、下記記事をご参考ください。

COCOONのHPでも丁寧に説明されています。

Font Awesomeを使用する
Font Awesomeを使ってアイコンを設置していきます。
使用したいアイコンをクリックし、コードを取得します。
<i class="fas fa-paper-plane"></i>
使用するのはクラス名なので
”fas fa-paper-plane”
をコピペします。
ダブルクォート ” ” は消してください。
クラス名をCSSクラス(オプション)に追加
Font AwesomeでコピーしたCSSクラス名(”fas fa-paper-plane”)を、メニュー設定に追加します。
設定の方法
・ダッシュボードを開く
・外観→カスタマイズ(メニュー)から、編集したいメニューを選択
・アイコンを付けたいメニューのCSSクラスにコピペする
CSSクラスと書いてあるテキストボックスに、使用したいアイコンのクラス名を入力します。
右画面はプレビューです。
アイコンとナビゲーションラベル(タイトル)が表示されました。(アイコンと文字がズレていますね。)
コンテンツ一つ一つに違うアイコンを設定することができます。
慌てないで
メニューの編集画面にCSSクラスや説明欄などのテキストボックスが見当たらない!!という方は、ヘルプ等を開きCSSや説明にチェックを入れてください。
キャプション(説明)を入れる
ナビゲーションラベルとアイコンのCSSクラスを入力しただけでは、プレビューの通り、表示がズレてしまっていました。

私の設定が悪いのかもしれません。ほか、見落としている便利な機能があるのかも…!
とはいえ、
キャプション(説明)に文字を入れると、いい感じでアイコンの下に文字が入りました。
↓外観のメニューからの設定画面はこんな感じです。
『外観→カスタマイズ』からメニューの編集をしていました。
そちらの方がプレビューを見ながら調整することができます。
キャプション(説明)を消す
せっかく表示したキャプションですが、
アイコンを真ん中にしたかっただけなので…
消します!
臭い物には蓋!の原理です。
世の中ほとんどの臭い物には蓋がされているので問題ありません。
CSSを追加する
外観→カスタマイズ→追加CSS
スタイルシートにCSSを追加していきます。
使用したCSS
.navi-in > ul .item-description{ visibility:hidden; }
キャプションを非表示にするCSSを追加してみました。
”要素を完全になくす”わけではなく、”ただ見えなくした”だけです。
メニュー名を細字にCustomize
ついでに、アイコンに影響されてかタイトルまで太字になっていたナビゲーションラベルを細字&小サイズにしてみました。
使用したCSS
.navi-in > ul .item-label{ font-size:0.6em; font-weight:300; }
出来上がり
そんなこんなで、
臭い物には蓋をしながらなんとか出来上がりました。
アイコンの下に文字があるメニューバー!
他にもっと簡単で美しい方法があるのかもしれませんが
小さい物を作りたかったので、これで良しとしましょう。
おわり