ナビゲーションメニューにアイコンをつける方法【SWELL】

こかげ

メニューにアイコンつけたいなあ～

ナビゲーションメニューの文字の横にアイコンをつけたいと思ったことはありませんか？
WordPressテーマ「SWELL」でアイコンを使うのはとっても簡単！

完成図はこんな感じです↓

それでは、アイコンの使い方を紹介していきます！

使いたいアイコンを選ぶ

まず、使いたいアイコンを選びましょう。
SWELLで使えるアイコンは公式サイトで紹介されています。

SWELL

SWELLで使えるアイコンの一覧 | WordPressテーマ SWELL ここでは、SWELLでフォントファイルとして読み込んでいるアイコンを一覧で紹介しています。 SWELLで標準で使用できるアイコンフォントは、IcoMoonで作成しています。 Font …

使いたいアイコンが決まったら、アイコンの横に書いてある「クラス名」をメモします。

今回は例として、ナビゲーションメニューの「Home」の横に「」のアイコンを使いたいと思います。

これを使うよ

アイコン： 　クラス名：icon-home

ナビゲーションメニューにアイコンをつける方法

ナビゲーションメニューにアイコンをつける手順を紹介します。

STEP

メニューを開く

まずメニューを開きます。
メニューの開き方は２パターンありますが、変更した状態をすぐに確認できる方がおすすめです↓

外観 ＞カスタマイズ ＞メニュー

STEP

「ヘッダーメニュー」を開く

「ヘッダーメニュー」もしくは、自身で「グローバルナビ」（ナビゲーションメニューのこと）に設定しているものをクリックします。

アイコンをつけたい項目をクリックします。

STEP

ショートコードを書く

「ナビゲーションラベル」の欄に下記のショートコードを書きます。

ショートコードの書き方

[icon クラス名]

または

[アイコン クラス名]

今回の使うアイコンのクラス名は、「icon-home」なので、

[icon icon-home]

これを「Home」の前に書きます。

アイコンと「Home」の文字の間に、半角スペースを入れています。

STEP

アイコンが表示される

「Home」の前にアイコンが表示されます。

こかげ

とっても簡単だね！

STEP

「公開」をクリックする

最後に右上の「公開」を忘れずにクリックしましょう。

ナビゲーションメニュー以外でアイコンを使う

アイコンはナビゲーションメニュー以外でも使えます。

記事内で使う

アイコンは記事内でも使えます。

例えば

顔を作ってみました 
これは下記のショートコードを書いています。

[icon icon-eye]　 [icon icon-eye] 
　[icon icon-chevron-small-down]

ボックスに使う

ボックスタイトルにも使えます。

例えば

これのコードはこんな感じ。

[icon icon-quotes-right]引用[icon icon-quotes-right]

ボタンに使う

ボタンにも使えます。

右側の「＞」のアイコンです。
このコードはこちら。

こちらからどうぞ　[icon icon-chevron-small-right]

ナビゲーションメニューにアイコンをつける方法まとめ

この記事では、ナビゲーションメニューにアイコンをつける方法をご紹介しました。

全て試してはないですが、おそらくテキストが書ける場所ならどこでも表示させることができると思います。
ぜひ活用してみてください！

こかげ

どんどん使おう～！

以上、こかげでした。