maabuu
こんにちは。Maabuuです。
グローバルナビ（ホームページのメニュー）の項目ごとに、小さなアイコンをつけているサイトをよく見かけます。
今回は、当サイトでもグローバルナビにアイコンをつけてみようと思いましたが、、、
maabuu
むずそう。。どうするん？？
サイトを色々調べてみると意外と簡単にできる事がわかりました！
FontAwesomeを使う
まずメニュー横に表示させてたいアイコンを探します
Search for Font Awesome | 日本語でアイコンフォントを簡単検索
Font Awesomeのアイコンフォントを日本語、英語、カタカナで簡単に検索することができる便利なウェブサービスです。
search-fa.com
※日本語対応していてとても探しやすいです。
使いたいアイコンを見つけたら、上記の「<i class=”○○”></i>」をコピーします。
次に、WordPressの管理画面から
今回はヘッダーメニューとフッターメニューにアイコンを入れたいと思います。
「<i class=”○○”></i>」を貼り付けます
「ナビゲーションラベル」のテキスト文字（下記画像だとプロフィール）の前に、先ほど見つけてきた「<i class=”○○”></i>」を貼り付けます。
※私の場合は、テキスト文字の前に半角スペースを入れました。
（<i class=”○○”></i>半角スペーステキスト文字）
最後に「メニューを保存」をクリックして、完成
このように、アイコンを入れたい箇所に上記を繰り返し行ってください。
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
※当サイで使用しているWordpressテーマは、無料テーマで有名な「Cocoon」です。
まとめ
本当に簡単にすぐできました。他にもいろいろレイアウトを変えていこうと思いました。
次は何をしようかな～～＾＾
それではまた＾＾
コメント