フォントが読み込まれるまで Font Awesome プレースホルダー アイコンを非表示にするにはどうすればよいですか?

アイコン表示のフォント読み込みステータスの決定

問題:

Font Awesome を使用すると、アイコンは最初にプレースホルダー文字で表示されますフォントファイルがロードされるまで。これに対処するには、読み込みプロセス中にこれらのプレースホルダー アイコンを非表示にする必要があります。

解決策:

フォント ファイルの読み込みステータスを検出するには、jQuery-FontSpy プラグインを利用します。 。このプラグインは、目的のフォントと任意の代替フォントの間のフォント幅の不一致を評価します。幅が一致する場合、目的のフォントはアンロードされたままになります。それ以外の場合は、正常にロードされています。

プラグインの実装:

1. jQuery-FontSpy スクリプトをインクルードします:

<script src="scripts/jquery-fontSpy.js"></script>

2. 必要に応じてプラグインを初期化します要素:

$('.icon-container').fontSpy({
  onLoad: 'fa-loaded',
  onFail: 'fa-not-loaded',
});

3. 読み込み状態と失敗状態のスタイルを定義します:

.fa-loaded {
  display: block;
}

.fa-not-loaded {
  display: none;
}

jQuery-FontSpy では、アイコンは最初は非表示になります。フォントのロード時に、「onLoad」クラスが適用され、アイコンが再表示されます。フォントのロードに失敗した場合は、「onFail」クラスが適用され、アイコンは非表示のままになります。このプラグインはアイコン表示を正確に制御し、フォントが完全に読み込まれる前でも最適なユーザー エクスペリエンスを保証します。

以上がフォントが読み込まれるまで Font Awesome プレースホルダー アイコンを非表示にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。