Font Awesome を JSF に統合するときに欠落しているフォント ファイルを修正するにはどうすればよいですか?

Font Awesome を JSF に統合する際のフォント ファイルの取得の問題に対処する

Font Awesome を JSF に統合する場合、欠落に関連する問題に対処することが重要ですフォントファイル。これらは、予期されるアイコンではなく、空の四角形として表示されます。 Font Awesome CSS ファイルは相対パスを使用してフォント ファイルを参照するため、ブラウザはフォント ファイルを見つけることができないことがよくあります。

問題の原因

JSF ;コンポーネントはライブラリ属性を設定し、CSS ファイルを別のパスに配置します。さらに、JSF はこれらのリソースに特別なプレフィックス /javax.faces.resource/* を適用し、ブラウザがリソースに直接アクセスできないようにします。

解決策

編集Font Awesome CSS ファイルを編集し、EL の #{resource} マッピングを使用してフォント ファイルへの参照を調整します。交換するのを忘れないでください?ライブラリ名を考慮してクエリ文字列に & を追加します。

例

Font Awesome CSS とフォント ファイルを適切に配置した後、CSS ファイルを次のように変更する必要があります。

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

追加の考慮事項

変更された CSS ファイルが JSF ページで使用されていること、および変更を有効にするためにサーバーが再起動されていることを確認してください。

MIME タイプと OmniFaces

MIME タイプが欠落していることを示す JSF1091 警告がサーバー ログに表示される場合は、適切な MIME タイプ マッピングを web.xml に追加します。

もう 1 つのオプションは、OmniFaces UnmappedResourceHandler をインストールし、FacesServlet マッピングを再構成することです。これにより、CSS ファイルを編集する必要がなくなります。

参考文献

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

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