JSF で Font Awesome を使用するときに見つからないフォント アイコンを修正するにはどうすればよいですか?

Font Awesome を JSF に統合し、フォントが見つからない問題を解決する

を使用して Font Awesome を JSF アプリケーションに組み込む場合タグを使用すると、ブラウザが CSS ファイル内で参照されているフォント ファイルを見つけられないという問題が発生する可能性があります。予期されたアイコンが表示される代わりに、空の四角形が表示されます。

原因:

デフォルトでは、Font Awesome CSS ファイルは、「..」のような相対パスを介してフォント ファイルを参照します。 /フォント/"。ただし、 を使用する場合は、 library 属性を持つタグを使用すると、JSF が別のパス上の CSS ファイルをリクエストし、フォント参照が失敗します。

解決策:

この問題を解決するには、 Font Awesome CSS ファイルを作成し、#{resource} マッピングを使用して相対フォント参照を EL 式に置き換えます。

<code class="css">@font-face {
  font-family: 'FontAwesome';
  src: url("#{resource['font-awesome:fonts/fontawesome-webfont.eot']}&amp;v=4.3.0");
  ...
}</code>

追加の考慮事項:

• 必ず確認してください。 CSS ファイルを変更した後にサーバーを再起動します。
• サーバー ログに JSF1091 警告が表示された場合は、必要な MIME タイプ マッピングを web.xml に追加して問題を解決してください。
• OmniFaces UnmappedResourceHandler は次のことができます。 CSS ファイルを手動で編集する代わりとしても利用できます。

参考資料:

• [webjars.org の Font Awesome を使用する方法JSF](https://stackoverflow.com/questions/28381776/how-to-use-font-awesome-from-webjars-org-with-jsf)

以上がJSF で Font Awesome を使用するときに見つからないフォント アイコンを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。