SWELLアイコンが表示されない原因5つと解決チェックリスト

ブログの見た目を整えたいのに、SWELLのアイコンが急に表示されなくなって焦っていませんか。

結論からいうと、落ち着いて原因を一つずつ潰していけば、ほとんどのケースは自力で直せます。

SWELLのアイコンが表示されないときの全体像とこの記事の使い方
SWELLのアイコンが表示されない前に知っておきたい基本
SWELLのアイコンが表示されないときの原因別チェックリスト
場所別に見るSWELLのアイコンが表示されないときの対処法
テーマ移行でSWELLのアイコンが表示されないときのポイント
それでもSWELLのアイコンが表示されないときの最終チェック
よくある質問｜SWELLのアイコンが表示されないときのQ&A
まとめ｜SWELLのアイコンが表示されないときに見るべきポイント

SWELLのアイコンが表示されないときの全体像とこの記事の使い方

ごとう

最初に、「どんなパターンのときにアイコンが出なくなりがちか」と「この記事の読み方」をざっくり整理しておきます。

よくある「SWELLのアイコンが表示されない」パターン3つ

まずは、自分の状況がどのパターンに近いかをざっくりイメージしてみてください。

症状のパターン	よくある原因の方向性	優先してチェックしたい場所
サイト全体でアイコンが表示されない	Font Awesome設定・テーマやWordPressのバージョン・キャッシュ	SWELL設定のFont Awesome / テーマとプラグインの更新状況
メニューやスマホ用固定フッターだけアイコンが出ない	メニューの説明欄・クラス名のミス / メニューの割り当て漏れ	外観→メニュー→固定フッターメニュー（SP）や各メニュー項目の設定
吹き出し・プロフィール・一部のパーツだけアイコンが消えた	ふきだしセットや画像設定ミス / キャッシュやプラグインの干渉	吹き出し設定 / ブロックの設定 / 追加CSS・キャッシュ関連

この記事は、次の流れで読むと迷いにくいと思います。

この表で、自分の症状に近いパターンを把握する
次の章で、SWELLのアイコンの仕組みを軽くおさらいする
そのあと「原因別チェックリスト」と「場所別対処法」を上から順番に試す

全部を一気にやろうとすると大変なので、「今日はメニュー周りだけ」「次は吹き出しだけ」と少しずつ進めていけばOKです。

SWELLのアイコンが表示されない前に知っておきたい基本

ごとう

いきなり設定を触る前に、「そもそもSWELLではどんな種類のアイコンを、どうやって表示しているのか」だけ軽く押さえておきましょう。ここを理解しておくと、原因の当たりがつけやすくなります。

SWELL専用アイコンとFont Awesomeの違い

SWELLでよく使われるアイコンには、大きく分けて次の2種類があります。

SWELLが用意している専用のアイコン（例：homeマークなど）
Font Awesomeという外部サービスのアイコンフォント

ざっくりイメージとしては、

SWELL専用アイコン…テーマの中に最初から入っているアイコンセット
Font Awesome…外部のアイコンフォントをSWELLから読み込んで使うもの

SWELL専用アイコンは、指定のクラス名やブロック、ショートコードを使えばシンプルに表示できます。

一方でFont Awesomeは、「SWELL側で読み込みをオンにする」「使うバージョンとクラス名を合わせる」といった前提条件があります。

「SWELLのアイコンが表示されない」というトラブルの多くは、この2種類が頭の中でごちゃっとしたまま設定してしまうところから始まっていることが多いです。

SWELLでアイコンを呼び出す3つの方法

アイコンをページに出す方法も、いくつかパターンがあります。

呼び出し方	よく使う場所	具体例
ブロックで表示する	記事本文の中	ボックスやボタンにアイコンを付ける、リストの頭にアイコンを付けるなど
ショートコードやクラス名で指定する	メニュー・モバイルフッター	メニューの説明欄やクラス欄にクラス名を書いてアイコンを出す
画像アイコンとして使う	吹き出し・プロフィール	メディアライブラリに登録した画像をアイコン代わりに表示する

自分が今トラブルになっている場所では、どの方法でアイコンを出しているかを意識しながら読み進めると、どこを見ればいいか分かりやすくなります。

SWELLのアイコンが表示されないときの原因別チェックリスト

ごとう

ここからは、場所に関係なく共通で確認してほしい「原因別チェックリスト」を紹介します。上から順番に試していくだけでも、多くのトラブルは解消できるはずです。

ステップ1：スペルミス・クラス名・ショートコードを見直す

まず一番多いのが、意外と単純なスペルミスやタイプミスです。

私も、homeの「e」を打ち忘れていたせいで、1時間くらい悩んだことがあります。

よくあるミス	症状	確認ポイント
クラス名の打ち間違い	特定のアイコンだけ表示されない	アイコン一覧に書いてあるクラス名と完全に一致しているかチェック
Font Awesomeのクラスが古い/違う	他テーマから移行したあとにアイコンが出ない	以前のテーマで使っていたクラス名と、SWELLで選んでいるバージョンが合っているか確認
ショートコードの括弧や記号抜け	ショートコードごと無視されてしまう	角カッコやダブルクオーテーションが抜けていないか、全角スペースが紛れていないかを見る

とくに、

公式マニュアルに載っているクラス名と完全に同じか
コピペしたときに余計なタグやスペースが混ざっていないか
ショートコードの前後に余計な改行やタグが入っていないか

あたりを重点的に見直してみてください。

ステップ2：WordPressとSWELLのバージョンを確認する

吹き出しや一部のブロックだけ表示が変になっている場合、WordPressやSWELL本体のバージョンが古いままになっていることもあります。

ダッシュボードの更新通知や、SWELLテーマのバージョン表示を一度チェックしてみてください。

WordPress本体に更新が残っていないか
SWELLの親テーマと子テーマのバージョンが極端に離れていないか

更新前には、念のためバックアップを取っておくと安心です。

古いバージョンのまま、古いFont Awesomeの記述が残っていると、クラス名との不一致でアイコンが出ないこともあるので注意しておきましょう。

ステップ3：Font Awesomeの読み込み設定を確認する

Font Awesomeのアイコンを使っている場合、「読み込み設定」が合っていないと、クラス名が正しくてもアイコンは表示されません。

SWELL側では、管理画面の設定で次のようなことを指定できます。

Font Awesomeを読み込むかどうか
CSSとして読み込むかどうか
どのバージョン（v5やv6など）を使うか

以前CocoonなどでFont Awesomeを使っていた人は、当時のバージョンとSWELLで指定しているバージョンを揃えると、一気に表示されるようになることが多いです。

逆に、SWELL側でFont Awesomeを読み込まない設定にしていると、クラス名だけ書いてもブラウザにフォント自体が届かないので、アイコンは出ません。

ステップ4：キャッシュとプラグイン・テーマの干渉を疑う

「編集画面では見えているのに、本番ページではアイコンが出ない」というときは、キャッシュやプラグインの影響を疑ってみてください。

ブラウザのキャッシュを削除して、強制再読み込みする
キャッシュ系プラグインを一時的に停止して確認する
別のブラウザやシークレットウィンドウで表示を確認する

これだけで、吹き出しやアイコンが復活することも珍しくありません。

また、目次プラグインやデザイン系プラグインなど、CSSに関わるプラグインがSWELLと競合していると、アイコンフォントの表示がおかしくなることもあります。

一度、プラグインをすべて停止してから1つずつ有効化していき、「どのプラグインをオンにしたら崩れるか」を見ると原因を特定しやすくなります。

ステップ5：子テーマやカスタムCSSを一時的にオフにする

カスタマイズが好きな人ほどハマりがちなのが、「自分で書いたCSSがアイコンを消している」パターンです。

子テーマのCSSで、アイコンに使っているクラスにdisplay:none;を指定してしまっている
フォント関連の指定を上書きしてしまい、アイコンフォントが文字化けしている

心当たりがある場合は、

一時的に親テーマに切り替えて動作を確認する
追加CSSをコメントアウトしてからページを表示してみる

といった方法で、カスタムCSSが原因かどうかを切り分けてみてください。

実際、親テーマに戻しただけで「アイコンが普通に出るようになった」という報告も多いので、最後の一押しとして試す価値は十分あります。

場所別に見るSWELLのアイコンが表示されないときの対処法

ごとう

ここからは、場所ごとに「SWELLのアイコンが表示されない」ケースと、その対処法を見ていきます。自分のサイトで問題が出ている場所から順番に読み進めてみてください。

スマホ用固定フッターメニューのアイコンが出ないとき

スマホ画面の下に出る「固定フッターメニュー（SP）」でアイコンが表示されない場合は、次の3つを優先してチェックすると原因が絞り込みやすいです。

チェック項目	確認する場所	ポイント
固定フッターメニューが有効か	外観→メニュー	「固定フッターメニュー（SP）」にチェックが入っているか
メニュー項目の説明欄が表示されているか	メニュー画面右上の「表示オプション」	「説明」にチェックが入っていて、入力欄が見える状態になっているか
説明欄やクラス名の内容	各メニュー項目の設定	クラス名やショートコードのスペルに間違いがないか、全角スペースが紛れていないか

他テーマから移行してきた場合、説明欄にCocoon時代のFont Awesomeクラスが残ったままになっていることも多いです。

SWELL側で設定しているFont Awesomeのバージョンと合わせるか、SWELLのアイコンを使うように書き換えてあげると、まとめて解決できるパターンがよくあります。

グローバルメニューやサイドバーのアイコンが表示されないとき

ヘッダーのグローバルメニューやサイドバーでも、考え方は固定フッターとほぼ同じです。

メニューにSWELLのアイコン用ショートコードを入れている場合は、スペルと括弧を確認する
Font Awesomeのクラスを直書きしている場合は、SWELL設定のバージョンと合っているかを見る
そもそもメニューが割り当てられているか（メニューの位置設定）を確認する

とくに「別のメニューを作ったらアイコンだけ消えた」という場合は、メニューの割り当て先を変更したタイミングで、説明欄の設定をコピーし忘れていることもよくあります。

吹き出しアイコンが表示されない・消えたとき

吹き出しは、「ふきだしセット」「ブロック」「画像やアイコン」の3つが関わるため、少し複雑です。

【稼げるキーワード教えます】
▼　　▼　　▼

よくある原因を整理すると、次のような感じになります。

症状	よくある原因	最初に試したいこと
吹き出しそのものが出ない	ふきだしセットの選択ミス / キャッシュの影響	ブロックで別の登録済みふきだしを選び直し、キャッシュも削除してみる
アイコン画像だけが表示されない	画像URLのミス / メディアから削除されている	メディアライブラリに画像が残っているか確認し、もう一度選び直す
吹き出しがまとめておかしくなった	データ移行機能の使い方ミス / 設定の上書き	バージョンと設定を確認し、必要であればふきだしを再登録・再インポートする

私も、吹き出しのデータ移行機能をいじったあとに、ほとんどのふきだしが崩れてしまったことがあります。

そのときは、

キャッシュを削除する
問題があるふきだしを一度削除して作り直す
古いデータがある場合は、案内通りに再インポートを試す

といった手順で戻せました。

同じような状況で困っている人は多いので、公式マニュアルやコミュニティの案内もあわせて確認してみてください。

SNSアイコン・プロフィール周りのアイコンが出ないとき

SNSアイコンやプロフィールのアイコンが表示されないときは、意外と単純な設定漏れのパターンが多いです。

カスタマイザーの「SNS設定」でURLが空のままになっていないか
プロフィール画像として設定している画像が、メディアライブラリから削除されていないか
Font AwesomeでSNSアイコンを出している場合、クラス名とバージョンが合っているか

SNSアイコンは「URLを入れてはじめて有効になる」タイプもあるので、一度URL欄を見直してみると良いです。

ファビコン（サイトアイコン）が反映されないとき

ブラウザのタブやスマホのホーム画面に表示される「サイトアイコン（ファビコン）」が切り替わらないときも、キャッシュや設定の影響を受けやすいです。

カスタマイザーの「サイト基本情報」でサイトアイコンが設定されているか
ブラウザのキャッシュを削除して再読み込みしてみたか
スマホのホーム画面に追加したアイコンを作り直してみたか

ファビコンは反映に時間がかかることもあるので、設定を変えたあと少し時間をおいてから再確認するのがおすすめです。

テーマ移行でSWELLのアイコンが表示されないときのポイント

ごとう

Cocoonなど別のテーマからSWELLに乗り換えたあと、「アイコンだけ一斉に消えた」「全部四角いマークになった」という相談もよく見かけます。

Font Awesomeのバージョンを合わせる

他テーマから移行した人に一番多いのが、Font Awesomeのバージョン違いによるトラブルです。

以前のテーマではv4やv5を使っていた
SWELL側では別のバージョンを読み込んでいる
記事やメニューのクラス名は古いまま

この状態だと、クラス名と中身が合っていないのでアイコンは表示されません。

対処法としては、

SWELLの設定画面で、以前使っていたFont Awesomeのバージョンに合わせる
もしくは、記事やメニューに書いているクラス名を新しいバージョンの書き方に揃える

という2パターンがあります。

私の場合は、まずSWELL側の設定をCocoon時代のバージョンに合わせてアイコンを復活させてから、少しずつ新しい記法に置き換えていきました。

SWELL設定でFont Awesomeの読み込み方法を見直す

Font Awesomeを使うときは、「読み込むかどうか」だけでなく、「どの方法で読み込むか」も大事です。

SWELLの設定画面では、

Font Awesomeを有効にするか
CSSとして読み込むかどうか
使用するアイコンのスタイルやバージョン

などを選べるようになっています。

ここで読み込み自体がオフになっていると、クラス名が正しくてもアイコンフォントがそもそも届かないので、当然表示されません。

テーマ移行直後は設定を見落としやすいので、一度改めてチェックしておくと安心です。

メニューやウィジェットの再設定で直るケースも多い

テーマを乗り換えると、

メニューの割り当て先
ウィジェットの中身
ショートコードやクラス名の扱い

などが少しずつ変わります。

特に、スマホの固定フッターメニューやサイドバーのアイコンが表示されないときは、

メニューが正しい位置に割り当てられているか
説明欄やクラス欄の中身がそのまま引き継がれているか
ウィジェットの種類がSWELL用になっているか

を見直してみてください。

場合によっては、一度設定をクリアして、SWELLのマニュアルどおりにメニューやウィジェットを作り直してしまったほうが、結果的に早く安定することも多いです。

それでもSWELLのアイコンが表示されないときの最終チェック

ごとう

ここまで試してもアイコンが表示されない場合は、「どこでおかしくなっているのか」を冷静に切り分けていく段階です。

別テーマ・プラグイン停止で原因を切り分ける

最終手段として、次のような方法があります。

一時的に別のデフォルトテーマに切り替えて様子を見る
プラグインをいったんすべて停止してから、一つずつ有効化して確認する

このとき、

別のテーマでもアイコンが出ない → WordPress本体やサーバー側の問題の可能性
別のテーマだと出る → SWELLやカスタマイズ周りに原因がある可能性
プラグイン停止で出るようになる → 特定のプラグインが原因の可能性

というように、だんだんと原因の範囲を狭めていきます。

フォーラムや公式マニュアルを活用する

どうしても原因が分からないときは、一人で抱え込まずにフォーラムや公式マニュアルを活用しましょう。

実際のユーザーからも、

Font Awesomeのアイコンが表示されない
吹き出しが崩れてしまった
スマホ固定フッターのアイコンが出ない

といった相談が多く寄せられていて、それに対する回答やアドバイスもたくさん公開されています。

自分と似た症状の例が見つかれば、ほぼ同じ手順を試すだけで解決できることもあります。

質問するときに添えておきたい情報チェックリスト

フォーラムやコミュニティで質問するときは、次の情報をセットで書いておくと、原因を特定してもらいやすくなります。

情報の種類	具体例
環境	WordPressのバージョン / SWELLのバージョン / 使用ブラウザ
症状	「スマホ固定フッターの◯◯だけアイコンが表示されない」など、なるべく具体的に
試したこと	キャッシュ削除 / プラグイン停止 / 親テーマへの切り替えなど
スクリーンショット	メニュー設定画面・吹き出し設定画面・実際の表示画面など