今回は大人気有料テーマ「SWELL」のグローバルナビでFont Awesomeを使う方法をご紹介します。
グローバルナビのアイコンとは
上の例は下向きの矢印ですが、Font Awesomeのアイコンを使っています。
Font Awesomeはウェブで使われるアイコンがたくさんあるサイトです。
一番人気です
大人気有料テーマ「SWELL」ならFont Awesomeのアイコンを簡単に使えます。
でもグローバルナビでの使い方がわからない
SWELLはとっても素晴らしいテーマです。
でも設定がわかりにくいところもあります。
でもそれは他のテーマでも同じです。
どのテーマも設定はわかりにくいです。
グローバルナビはページのトップ(上の方)に設置すると思います。
このサイトでも上に表示しています。
「SWELL」の前にが表示されていますね。
コレです。
今回はどうやって表示するかをご紹介します。
手順① Font Awesomを使えるよう設定します
まず「SWELL設定」を開き、「Font Awesome」のタブをクリックします。
「Font Awesomeの読み込み」のページが開きます。
ここで「読み込み方」を「CSSで読み込む」、バージョンを「v6」にします。(2022年5月現在)
手順② アイコンを決めます
使うアイコンを決めます。まず、Font Awesomeのサイトに行きます。
どう決めるかはいくつか方法がありますが、今回は最初に紹介したアイスクリームのアイコン「」を検索してみつけることにします。
検索アイコン「」をクリックします。
検索ワードは日本語だとダメみたいです。なので「ice cream」と入力しますね。
入力するだけで候補が出てきますね。
Pro会員(有料)でなく、無料会員なら左上の「Free」をクリックしてください。使えるアイコンが残ります。
そのアイコンをクリックします。
そうすると、そのアイコンのウィンドウがポップアップします。
赤の線で囲んだ部分「<i class=”fa-solid fa-ice-cream”> </i>」をメモしてください。(下図は拡大部分)
手順③ メニューにコードを追加します
WordPressに戻ります。
「外観」→「メニュー」でメニューの設定画面を開きます。
すでにグローバルナビにメニューを登録している人はそのメニューを呼び出してください。
まだ作っていない人(すでに作っているけど新たに作る人)は「新しいメニューを作成しましょう」から作ってください。
「メニュー項目から追加」でメニューを1つ追加します。
なんでもOKですが、上の例では「カテゴリー」から選びました。
そのメニューの右端にある「▼」のマークをクリックすると、小さいウィンドウが開きます。(上の図の状態)
ここの「ナビゲーションラベル」がポイントです。
上の例ではナビゲーションラベルが「SWELL」になっていますね。
グローバルナビに表示されるテキストです。
そのテキストの前に先ほどメモした
<i class=”fa-solid fa-ice-cream”></i>
を追加します。
その後に必ず、画面右下にある「メニューを保存」をクリックしてください。
これでアイコンが表示されます。サイトを開いてご確認ください。
追加情報
この本文の中にもアイコンが登場しますね。
この場合は少しだけ書き方が違います。ご注意を。
本文中に表示するには
[icon class="fa-solid fa-ice-cream"]
このように書きます。「[」で囲っていますね。
これはショートコードと呼ばれるものです。
コメント