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

Barbara Streisand
リリース: 2024-10-29 20:34:02
オリジナル
667 人が閲覧しました

How to Fix Missing Font Icons When Using Font Awesome in JSF?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!