ロードされていないElementorアイコンを修正する方法(実績のあるガイド)

公開: 2025-06-19

Elementorは、WordPressの最も人気のあるページビルダーの1つです。これにより、コーディングなしで美しいWebサイトを設計できます。その便利な機能の1つは、アイコンライブラリです。サイトのボタン、メニュー、見出しなどに簡単に追加できる多くの無料のプレミアムアイコンにアクセスできます。

これらのアイコンは、サイトをモダンでプロフェッショナルに見せるのに役立ちます。彼らは、UXの設計を改善し、ユーザーをガイドし、重要なコンテンツを強調する機能を備えています。したがって、ウェブサイトをより使いやすく、ナビゲートしやすく、訪問者の注意をより効果的につかむことができます。

ただし、バックエンドエディターに表示されていますが、Elementorアイコンがフロントエンドに適切にロードされない場合があります。たとえば、下の画像をご覧ください。アイコンがElementorキャンバスに表示されていることがわかります。

Icons are displayed on the Elementor Canvas

エラー:ページのフロントエンドにアクセスすると、アイコンが表示されないことがわかります。それはあなたの端で空白または壊れているかもしれません。

Icons aren't displayed on the frontend

これはイライラする可能性があり、あなたのウェブサイトを不完全に見せることができます。したがって、この記事では、Elementorアイコンの読み込みの問題を修正する方法に関する段階的なガイドについて説明します。始めましょう!

Elementorアイコンがフロントエンドにロードされない理由

ElementorアイコンがWebサイトのフロントエンドにロードされない場合は、さまざまな理由があります。それらをよく知ったら、問題を解決するのは簡単です。以下に確認してください。

Why Elementor Icons May Not Load on the Frontend
  • Elementorの不完全な設定

Elementorは、手動または自動的にフォントの素晴らしいアイコンをロードするオプションを提供します。これらの設定がElementor> [設定]> [Advanced]で正しく構成されていない場合、アイコンライブラリはロードされない場合があります。また、フロントエンドでアイコンの読み込みを無効にすることができます。

  • フォントの不足している素晴らしいファイル

Elementorアイコンは、人気のあるアイコンツールキットであるFont Awesomeに依存しています。必要なフォントがファイルパスやサーバーの問題が誤っていないためにロードされていない場合、アイコンは表示されません。これは、更新不良、ファイル許可エラー、または誤解されたホスティング環境の後に発生する可能性があります。

  • キャッシュの問題

キャッシュプラグインまたはブラウザは、サイトのページとリソースの古いバージョンを保存する場合があります。キャッシュバージョンに最新のアイコンファイルやスクリプトが含まれていない場合、アイコンはフロントエンドに正しく表示されない場合があります。すべてのキャッシュ(ブラウザ、プラグイン、サーバー側)をクリアすると、問題が解決できます。

  • 悪いCDN

コンテンツ配信ネットワーク(CDNS)は、近くのサーバーからファイルを提供することで、サイトのコンテンツをより速く読み込むのに役立ちます。ただし、CDNがアイコンファイルを適切に提供または更新できない場合、Elementorアイコンが表示されない場合があります。 CDNの設定が正しくないか、同期がデレイされると、アイコンが読み込まれます。

  • 遅いまたは不安定なインターネット接続

インターネットが十分に迅速でない場合、Elementorアイコンは完全にロードされない場合があります。ネットワークの問題による部分的なファイルのロードは、フロントエンドで予想どおりに表示されるのを防ぐことができる場合があります。

注:あなたが見ることができるように、上記の特定された問題の中で、 Elementorの不完全な設定フォントの素晴らしいファイルキャッシングの問題はあなたの管理下にあるものです。これらの問題を正しい手順を実行して修正できます。

Webサイトに問題を読み込んでいないElementor Editorのトラブルシューティング方法に関するこの投稿を確認してください。

[エレメントアイコン]を修正する方法は読み込まれません - 設定の構成

次に、このセクションでは、上記のセクションのメモに記載されている問題を処理することにより、問題を読み込まないElementorアイコンを修正する方法を示します。読み続けてください。

ソリューション1:不完全な設定の構成

まず、ウェブサイトのバックエンドダッシュボードに移動します。 Elementor> [設定]> [Advanced]に移動します。

Elementor Advanced Settings

ページを少し下にスクロールして、 Googleフォントのオプションにアクセスしてください。ドロップダウンオプションから、有効にします

Enable Google Fonts

同様に、 Load Font Awesome 4サポートオプションを見つけて、そのためにはいを選択します。

Enable Load Font Awesome

すべての変更が完了したら、 [変更の保存]ボタンをクリックします。

Save the changes

さて、フロントエンドに来て、ページをリロードします。アイコンが完全に表示されていることがわかります。

Check icons on the frontend again

したがって、この最初のソリューションは、 Elementorの不完全な設定欠落しているフォントファイルの問題の両方を解決します。

解決策2:キャッシュをクリアします

フロントエンドにまだアイコンが表示されない場合は、キャッシングの問題がある可能性があります。

あなたのウェブサイトのキャッシュをクリアする方法はたくさんあります。今日、ほとんどのホスティング会社はキャッシングオプションを提供しています。たとえば、Hostingerを使用している場合は、WebサイトにアクセスしてWebサイトを選択してください。クリアキャッシュオプションが表示されます。

ボタンをクリックすると、ウェブサイトからキャッシュをクリアできます。

Clear cache from Hosting

あなたのウェブサイトに明確なキャッシュオプションがない場合、心配はありません。今日、このオプションも提供する多くのプラグインがあります。たとえば、WPロケットは、最も人気のあるものの1つです。

WPロケットプラグインがサイトにインストールされているとします。プラグインダッシュボードに移動します。クリアおよびプリロードオプションが表示されます。ボタンをクリックすると、サイトからキャッシュをクリアできます。

Clear cache to load your Elementor Icons

WPロケットは、プレミアムのみのプラグインです。しかし、他の多くのキャッシュプラグインは、無料のバージョンとプレミアムバージョンの両方を提供しています。この投稿でそれらを取得します - 最高のWordPressキャッシングプラグイン。

ソリューション3:Elementorと依存プラグインを更新します

多くの場合、古いバージョンにはバグがある可能性があるため、Elementorと関連するプラグインを更新しないと、この問題が発生する可能性があります。したがって、上記のアプローチを完了した後でも問題が解決しない場合、

プラグインページに移動して、その下に更新されているかどうかを確認してください。通知が表示されている場合は、ボタンをクリックしてプラグインを更新します。

次に、Webページをリロードします。これがあなたの問題を解決することを願っています。

Update Elementor Plugin

ソリューション4:より良いインターネットとCDNを使用します

まだこの問題に苦しんでいる場合、インターネットや使用しているCDNに問題がある可能性があります。あなたが可能なすべての技術的な仕事をしたからです。したがって、残りの問題はあなたのCDNまたはインターネットサービスにある可能性があると仮定できます。

オンラインで多くのツール(Fast.com)があります。これにより、インターネットの速度を確認できます。また、ホスティングまたはCDNサービスプロバイダーについて話し合います。彼らがあなたのために答えを持っていることを願っています。

したがって、WordPressで問題を読み込んでいないElementorアイコンを解くことができます。

ボーナスポイント:追加のアイコンをElementorライブラリにインポートするために追加のプラグインを使用してください

デフォルトでは、ElementorはFont Awesomeアイコンを使用します。ただし、これらのアイコンが十分ではないと感じ、より多くのオプションが必要だと感じた場合は、新しいアイコンバッチをライブラリにアップロードできます。これを行うには多くの方法があります。

しかし、プラグインを単にインストールするだけで、新しいアイコンの膨大なコレクションをライブラリに追加する簡単な方法を知っています。このセクションでこのプロセスについて説明します。

Elementor Icon Library

プラグインをインストールします

新しいプラグインの追加オプションに移動します。プラグインアイコン要素 - Elementor Page Builderアイコンパック(6718アイコン)をインストールしてアクティブにします。

Install the Icon Element plugin

次に、もう一度キャンバスに行き、アイコンライブラリを開きます。デフォルトオプションの下の左側にいくつかの新しいバッチが追加されていることがわかります。

それらをクリックして、付属のアイコンを探索できます。

New icon batches added to the Elementor Library

この無料のプラグインを希望すると、ウェブサイトで何千もの役立つアイコンをロック解除して使用できます。

読み込まれていないElementorアイコンに関するよくある質問

チュートリアルを楽しんだことを願っています。さて、このセクションでは、今日のトピックに関連する最もよくある質問をリストして回答します。

なぜ私の要素のアイコンがライブサイトに表示されないのですか?

アイコンは、プラグイン/テーマの競合、フォントの素晴らしいファイルの欠落、キャッシングの問題、または誤った要素設定など、いくつかの理由により表示されない場合があります。これらの問題は、アイコンファイルがフロントエンドに適切に読み込まれないようにします。

アイコンが機能するために、Elementorの特別な設定を有効にする必要がありますか?

はい。 Elementorの設定では、フォントの素晴らしい読み込みオプションが有効になっていることを確認してください。また、互換性の問題を回避するために、Elementorの最新バージョンに更新してください。

アイコンの問題を修正していない場合はどうすればよいですか?

デフォルトのWordPressテーマ(Twenty24-4など)に切り替えて、Elementorを除くすべてのプラグインを無効にしてみてください。次に、アイコンが読み込まれるかどうかを確認します。もしそうなら、あなたのプラグインまたはあなたのテーマの1つが問題を引き起こしています。

締めくくり!

Elementorアイコンを修正しないと、ロードの問題は最初は難しいように思えるかもしれませんが、正しい手順では簡単に解決できます。 Elementorの基本設定をチェックすることから常に始めて、Font Awessomが有効になっていることを確認してください。古いキャッシュファイルが更新されたリソースをブロックすることが多いため、変更を行った後、すべてのタイプのキャッシュをクリアします。

また、Elementorと他のすべてのプラグインを定期的に更新して、予期しないバグや互換性の問題を回避します。将来この問題を防ぐために、Elementorと競合する可能性のあるあまりにも多くのプラグインを使用しないでください。 Elementorを完全にサポートする適切にコーディングされたテーマを使用します。 Nulledプラグインから離れてください。

CDNを使用している場合は、適切に構成および同期していることを確認してください。最後に、さまざまなブラウザやデバイスでサイトをテストして、すべての訪問者にアイコンがスムーズにロードされていることを確認します。これらの単純な習慣は、サイトを常に完璧に見せ続けるのに役立ちます。