Elementorアイコンが表示されない問題を解決する方法：5つの簡単なヒント

Elementorのアイコンが消える原因はいくつか考えられます。CSSファイルの欠落、プラグインデータの古さ、キャッシュの競合、HTTPSの不一致、サーバーの制限などが、米国および世界中のWordPressサイトで最も一般的な原因です。.

このガイドでは、あらゆる原因とその正確な解決策を網羅しているので、推測に頼ることなくアイコンを復元できます。.

Elementor のアイコン ボックスとは何ですか?

アイコンボックスは、 Elementor ウィジェットです。ページ上の機能、サービス、重要な情報を強調表示するために使用できます。Font Awesome、Material Design、カスタムアイコンライブラリに対応しており、コードを一切変更することなく、Elementorエディターでサイズ、色、配置を直接調整できます。

アイコン ボックスでできることは次のとおりです。

• アイコンを選択してください: Font Awesome や Material Design のアイコンがお好みでも、独自のアイコンをお持ちでも、選択はあなた次第です。

• 自分好みにカスタマイズ： アイコンをもう少し大きくしたい？色を変えたい？問題ありません。サイズを調整したり、色合いを変えたり、見た目をいろいろ試すことができます。さらに、タイトルと説明も入力できます。

• ドラッグ＆ドロップで完了： 使い方は簡単で、ITの知識は一切不要です。アイコンボックスウィジェットをページや投稿の目的の場所にドラッグするだけで、設定は完了です。

Elementorのアイコンで困っていませんか？チェックリストが役立ちます

アイコンが表示されない場合は、より高度な修正を試す前に、この簡単なチェックリストに従って考えられるエラーを特定し、アイコンを復元してください。.

• Elementor を更新: スマートフォンのアプリをアップデートするのと同じように、ソフトウェアもアップデートが必要です。Elementor が最新であることを確認してください。

• アイコンライブラリを確認してください。Elementor を開き、「設定」→「詳細設定」の順に進み、「Font Awesome」オプションが有効になっていることを確認してください。 このオプションが無効になっている場合、他の設定に関係なくアイコンは表示されません。

• プラグインまたはテーマの競合をテストする： 他のプラグインを一時的に無効にし、Twenty Twenty-F​​ourなどのデフォルトのWordPressテーマに切り替えます。アイコンが再び表示される場合は、プラグインを1つずつ有効化して競合の原因を特定します。

• すべてのキャッシュをクリアする： ブラウザのキャッシュとキャッシュプラグインのキャッシュをクリアしてください。また、Elementor > ツール > ファイルとデータの再生成でElementorのファイルを再生成し、最新のアセットが読み込まれるようにしてください。

• 別のブラウザでテストする： ブラウザによってはフォントの読み込み方法が異なります。Chrome、Firefox、Safariでページをテストして、問題がブラウザ固有のものか、サイト全体のものかを確認してください。

• CDNの設定を確認してください： CDNを使用している場合、Elementorアイコンが依存するフォントファイルがブロックされている可能性があります。一時的にCDNを無効にして、アイコンが読み込まれるかどうかをテストしてください。読み込まれる場合は、CDNプロバイダーに連絡して、必要なフォントファイルの種類をホワイトリストに追加してください。

Elementorアイコンが表示されない問題を解決するヒント

Elementor のカスタム アイコンが Web サイトで隠れんぼをすると困惑することがあります。.

Elementorのアイコンに関する問題のほとんどは、次の2つの原因のいずれかに起因します。1つは、プラグインの最近の変更によってアイコンの読み込み方法に影響が出ていること、もう1つは、ライブラリにアイコンが全く存在しないことです。以下の修正方法は、これらの両方に対応しています。.

• Elementorプラグインの変更： 最近の変更、アップデート、またはカスタマイズにより、アイコンが正しく表示されない場合があります。これは、競合または互換性のない設定が原因である可能性があります。

• ライブラリにアイコンが表示されない: ライブラリのアイコンが表示されない、または読み込まれない場合があり、レイアウトからアイコンが消えてしまうことがあります。

考えられる原因を特定したので、アイコンを再び目立つようにするための解決策を見ていきましょう。.

問題1：Elementorプラグインの変更

最近Elementorプラグインをアップデートしたか、あるいはインストールしたばかりで、一部のFont Awesomeアイコンが表示されないという問題が発生している可能性があります。.

次のことが可能です:

• WordPress ダッシュボードに移動します。.
• サイドバーから「Elementor」を選択し、「設定」を選択します。
• 「詳細設定」タブをクリックします。.
• 「Font Awesome 4 Supportを読み込む」オプションを探します。有効にするか、有効になっていることを確認してください。.

問題2: 古いElementor CSSとデータファイル

プラグインのアップデートや設定変更により、生成されたCSSファイルが古くなったり破損したりしたために、Elementorアイコンが読み込まれない場合があります。この場合、アイコンのフォントスタイルが正しく読み込まれず、ページ上でアイコンが空白になったり、見えなくなったりすることがあります。

幸いなことに、Elementorはこの問題を簡単に解決する方法を提供しています。ファイルを再生成するには、以下の手順に従ってください。

• WordPress ダッシュボードに移動して、 Elementor。
• メニューから「ツール」をクリックします。
• [全般]タブで、 [ファイルとデータの再生成]を選択します。
• ボタンをクリックし、Elementor がデータを更新できるようにします。.

このプロセスでは、データベースに保存されているCSSファイルを再構築し、アイコンの表示に使用されるリソースを更新します。これらの手順を完了したら、ページをリロードしてアイコンが表示されるかどうかを確認してください。.

多くの場合、この簡単な修正により、さらなるトラブルシューティングを必要とせずにエラーが解決されます。.

問題3: 混合コンテンツまたはHTTPS構成の問題

アイコンが表示されないもう一つのよくある原因は、混合コンテンツの問題です。 これは、ウェブサイトが HTTPSもかかわらず、一部のアイコンファイルやフォントリソースがHTTP経由でリクエストされている場合に発生します。

最新のブラウザはセキュリティ上の理由からこれらのリクエストをブロックし、アイコンの読み込みを防止します。.

まず、一般設定でWordPressアドレスとサイトアドレスを確認し、両方が正しいhttps URLを使用していることを確認してください。不一致がある場合は、設定を更新して変更を保存してください。.

ブラウザの開発者ツールでページを調べて、ブロックされているリソースを見つけることもできます。アイコンファイルがブロックされている場合は、データベースまたはプラグインの設定でURLを更新してください。.

すべてのリソースが HTTPS 経由で読み込まれると、アイコンが再び表示されるようになります。.

問題4: ファイルの権限またはサーバー構成の問題

場合によっては、ホスティングまたはサーバーの設定に問題がある可能性があります。ElementorのアイコンはWOFFやTTFなどのフォントファイルに依存しています。サーバーがこれらのファイル形式をブロックしている場合、または ファイルのパーミッション が正しくない場合、アイコンが正しく読み込まれない可能性があります。

この問題を解決するには、WordPressインストール内のファイル権限、特にElementorリソースを保存しているフォルダの権限を確認してください。権限設定により、サーバーがこれらのファイルにアクセスできるようになります。.

ホスティングプロバイダーに問い合わせて、フォントファイルがセキュリティルールによって制限されていないことを確認することもできます。一部のサーバーでは、デフォルトで特定のリソースがブロックされており、アイコンが空白になる場合があります。.

サーバーが必要なファイルへのアクセスを許可すると、Elementor アイコンが Web サイトのメニューとページ全体に正常に読み込まれるようになります。.

問題5: ライブラリからアイコンが消える

時々、Elementor アイコン ライブラリのアイコンが消えることがあります。特に「Nucleo Mini」アイコンを使用するテンプレートでよく発生します。.

これを確認および解決する方法は次のとおりです。

• アイコンが表示されるページにアクセスします。.
• 「Elementor で編集」ボタンをクリックして、Elementor エディターを起動します。.
• そこからメディアライブラリを開きます。探しているアイコンがライブラリ内にあるかどうかを確認できます。.
• 必要なアイコンが見つからない場合、問題を解決するには、Kava Extra プラグインを最新バージョンに更新する必要があります。.

Font Awesomeプラグインの代替

上記の方法でアイコンが復元されない場合は、別の方法として、 Font Awesome プラグインを直接インストールしてみてください。

• WordPressの管理パネル内で、 [プラグイン] → [新規追加] → [プラグインのアップロード]。
• ここで、コンピューターにダウンロードした Font Awesome プラグインをアップロードするオプションがあります。.
• 「今すぐインストール」ボタンをクリックします。.
• インストールしたら、「プラグインを有効化」ボタンをクリックすることを忘れないでください。.
• これで、Font Awesome プラグインがサイトで有効になり、アイコンが再び機能するようになります。

大きな変更や更新を行う前に、必ずサイトのバックアップを作成してください。予期せぬ事態が発生した場合でも、頼れる安全策となります。.

結論：Elementorアイコンを修正して正常に動作させ続ける

Elementorのアイコンが表示されない原因は、ほぼ例外なく次の5つのいずれかです。プラグインの設定が古い、CSSファイルが古い、HTTPSの競合、サーバーの制限、またはライブラリアイコンが不足している。.

修正手順を順番に実行すれば、ほとんどの場合、サポートに問い合わせることなく問題を解決できます。それでも解決しない場合は、Font Awesomeプラグインを直接インストールすることで、Elementorの組み込みアイコン読み込みとは独立して動作する、信頼性の高い代替手段が提供されます。.

Elementorアイコンが表示されない問題の解決に関するよくある質問