スマホのフッターメニューが全部「★」や「✖️」になっていておかしい！
私はWordPressの人気テーマ「Cocoon（コクーン）」を使っていて、スマホの下に出るフッターメニューを設定したときに、なぜかアイコンが全部星マークやバツ印で表示されてしまい、かなり困りました。「せっかくオシャレにしたかったのに、これはないな…」とがっかりしたのを覚えています。
いろいろ調べてみると、原因は「Font Awesome（フォントオーサム）」というアイコンフォントの設定にありました。このアイコンは、ウェブ上でよく見るメール（✉️）やユーザー（👤）などのマークを簡単に表示できる便利な仕組みです。
この記事では、私が実際にやってうまくいった方法を、高校生でも理解できるように丁寧に説明していきます。
Font Awesomeのバージョンが合っていないと表示されない！
Cocoonの初期設定では「Font Awesome 4」という古いバージョンが使われています。しかし最近の公式サイトなどでは、「Font Awesome 5」や「6」が主流です。
このバージョン違いが原因で、Font Awesome 5のコードを使っても、Cocoon側が対応できずに、星マークやバツ印のような代替アイコンが表示されてしまうのです。
私も最初は「fas fa-home」などのコードをそのまま貼り付けていたのですが、全くうまく表示されませんでした。後でCocoonの設定が古いままだったことに気づき、「これは自分で設定を変えないとダメなんだな」と理解しました。
Font Awesome 5に切り替える方法
Font Awesome 5を使うためには、まずCocoonの設定を変更する必要があります。手順は以下の通りです。
-
WordPressの管理画面にログインします。
-
左のメニューから「Cocoon設定」をクリックします。
-
上部タブの「全体」を開きます。
-
下にスクロールして「サイトアイコンフォント」を見つけます。
-
「Font Awesome 4」となっている場合は、「Font Awesome 5」に変更します。
-
一番下までスクロールして「変更をまとめて保存」をクリックします。
この操作で、CocoonがFont Awesome 5のアイコンを読み込むようになります。保存を忘れると反映されないので注意しましょう。
使いたいアイコンの探し方と選び方
設定が完了したら、次は表示させたいアイコンを探しましょう。
-
Font Awesome公式サイト にアクセスします。
-
左側のフィルターで「Free（無料）」にチェックを入れます。
-
上の検索バーで「home」「user」などのキーワードを入力して検索します。
-
アイコンをクリックし、「fas fa-home」などのクラス名をコピーします。
クラス名の先頭にある「fas」「far」「fab」はそれぞれのアイコンスタイルを示しています。
-
fas：塗りつぶし（Solid）
-
far：線のみ（Regular）
-
fab：ブランドロゴ（Brands）
正しいクラス名をコピーすることが、表示成功のカギです。
メニューにアイコンを追加する手順
次に、WordPressでモバイルフッターメニューにアイコンを反映させましょう。
-
「外観」→「メニュー」に移動します。
-
編集するモバイル用メニューを選びます。
-
画面右上の「表示オプション」をクリックし、「CSSクラス」にチェックを入れます。
-
各メニュー項目を展開し、「CSSクラス（任意）」の欄にクラス名（例：fas fa-home）を入力します。
-
「フッターモバイルボタン」にチェックが入っているか確認します。
-
「メニューを保存」をクリックして完了です。
※注意：「」といったHTMLタグ全体を貼るのではなく、クラス名（fas fa-home）だけを入力してください。
私は最初にタグ全体を貼ってしまい、何度やってもうまくいかず苦労しました。クラス名だけを入力するのが重要なポイントです。
アイコンが表示されないときの原因と対策
正しく設定してもアイコンが表示されない場合は、「キャッシュ」が原因かもしれません。
キャッシュとは、以前表示した情報をパソコンやスマホに保存して、次に素早く表示するための仕組みです。しかし、設定を変えてもキャッシュのせいで古い情報が残り、表示が変わらないことがあります。
キャッシュを削除するには以下の方法があります。
-
Cocoon設定 →「キャッシュ削除」→「すべてのキャッシュを削除」
-
ブラウザのスーパーリロード（Windows: Ctrl + Shift + R、Mac: Cmd + Shift + R）
-
キャッシュ系プラグインを使っている場合は、その設定画面から削除する
私もこの作業をしてようやくアイコンが正しく表示されるようになりました。意外と見落としがちなので、設定後は一度キャッシュをクリアしてみることをおすすめします。
うまくいかないときにチェックすること
それでも表示されない場合は、以下を再確認してください。
-
Cocoonの設定が「Font Awesome 5」になっているか？
-
クラス名に「fas」「far」「fab」などの接頭辞が含まれているか？
-
使用しているアイコンが無料の「Free」であるか？
-
クラス名だけを入力し、HTMLタグ全体を貼っていないか？
-
メニューの「フッターモバイルボタン」にチェックが入っているか？
-
キャッシュをしっかり削除したか？
また、プラグインが多く入っていると競合してうまく動作しない場合があります。その場合は一度プラグインを無効にしてから試すと良いです。
まとめ：今では✉️ 👤 🛡 のアイコンがきれいに表示されています！
設定をやり直してみた結果、私のモバイルメニューでも✉️（メール）、👤（プロフィール）、🛡（セキュリティ）などのアイコンが正しく表示されるようになりました。
最初はとても手こずりましたが、ひとつずつ確認していけば、初心者でもしっかり対応できます。
同じような問題で困っている方は、ぜひこの記事の手順を試してみてください。あなたのメニューもきっときれいに整います！
コメント