こんにちは。
ヘッダーに置こうとしたメニューバー。
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;
}
出来上がり
そんなこんなで、
臭い物には蓋をしながらなんとか出来上がりました。
アイコンの下に文字があるメニューバー！
他にもっと簡単で美しい方法があるのかもしれませんが
小さい物を作りたかったので、これで良しとしましょう。
おわり
