JSF で Font Awesome を使用する方法: アイコンに空の四角が表示されるのはなぜですか?

JSF での Font Awesome フォント ファイルへのアクセス

Font Awesome を JSF と統合するには、CSS ファイルがフォント ファイルを参照する方法を考慮する必要があります。デフォルトでは、Font Awesome CSS ファイルは相対パスを使用するため、JSF リソース マッピング システムを通じてファイルにアクセスするときに問題が発生する可能性があります。

空のフォント正方形の根本原因

JSF では、指定されたライブラリ属性を持つタグは、特別なパス プレフィックス /javax.faces.resource/* を使用してリソースにアクセスします。このパス経由で Font Awesome CSS ファイルにアクセスすると、CSS ファイル内の相対パスが正しくなくなり、ブラウザがフォント ファイルを見つけることができなくなります。

解決策: CSS ファイル参照を調整します

この問題に対処するには、EL 式を使用して #{resource} マッピング経由でフォント ファイルを参照するように Font Awesome CSS ファイルを変更する必要があります。たとえば、次のコード スニペットはフォント ファイル参照を更新します。

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

#{resource} マッピングを使用して、すべての相対パスを式に置き換えます。

その他の考慮事項

• CSS ファイルの編集後にサーバーを再起動して、変更を有効にします。
• フォント ファイルの MIME タイプの欠落に関する警告がサーバー ログに表示される場合は、必要な MIME マッピングを追加してください。
• または、OmniFaces UnmappedResourceHandler をインストールして、リソース処理プロセスを簡素化します。
• library 属性なしで Font Awesome CSS を使用するには、name 属性を使用して JSF でファイルを直接参照します。 :

<code class="html"><h:outputStylesheet name="font-awesome/css/font-awesome.min.css" /></code>

追加リソース

• [JSF で webjars.org の Font Awesome を使用する方法](関連参照リンク)

以上がJSF で Font Awesome を使用する方法: アイコンに空の四角が表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。