【SWELL:2022年最新】グローバルナビにFont Awesomeのアイコンを表示させる方法

今回は大人気有料テーマ「SWELL」のグローバルナビでFont Awesomeを使う方法をご紹介します。

Index

グローバルナビのアイコンとは

上の例は下向きの矢印ですが、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"]

このように書きます。「[」で囲っていますね。

ながはま

これはショートコードと呼ばれるものです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

Index