JSF に Font Awesome を統合するときに発生するフォントファイルが見つからないエラーを解決するにはどうすればよいですか?-CSSチュートリアル-php.cn

JSF に Font Awesome を統合するときに発生するフォントファイルが見つからないエラーを解決するにはどうすればよいですか?

Patricia Arquette

リリース： 2024-10-31 00:51:29

オリジナル

868 人が閲覧しました

How to Resolve the Missing Font Files Error When Integrating Font Awesome in JSF?

JSF での Font Awesome の統合: フォントファイルの欠落エラーの解決

Font Awesome を JSF アプリケーションに組み込むときに、次の問題が発生する可能性があります。ブラウザーは関連するフォントファイルを見つけることができず、期待されるアイコンの代わりに空の四角形が表示されます。これは、デフォルトの Font Awesome CSS ファイルが相対パスを使用してフォントファイルを参照するために発生します。これは、JSF 経由で CSS ファイルにアクセスする場合にはサポートされていません。

根本原因:

JSF コンポーネントは、ライブラリ属性を使用するときに、CSS ファイルのパスに特別なプレフィックスを追加します。このプレフィックスはリクエストを JSF リソースハンドラーに送り、カスタマイズオプションを可能にします。ただし、これにより、Font Awesome CSS パス参照に関する問題が発生します。

解決策:

この問題を解決するには、Font Awesome CSS ファイルを変更して、 JSF 式言語 (EL) #{resource} は、適切なライブラリとリソース名を使用して、「/resources」フォルダー内の参照フォントファイルにマッピングされます。さらに、ライブラリ名がクエリ文字列パラメーターとして使用されている参照では、疑問符 (?) をアンパサンド (&) に置き換える必要がある場合があります。

更新された CSS パス参照:

<code class="css">@font-face {
  font-family: 'FontAwesome';
  src: url("#{resource['font-awesome:fonts/fontawesome-webfont.eot']}&amp;v=4.3.0");
  src: url("#{resource['font-awesome:fonts/fontawesome-webfont.eot']}&amp;#iefix&amp;v=4.3.0") format('embedded-opentype'),
       url("#{resource['font-awesome:fonts/fontawesome-webfont.woff2']}&amp;v=4.3.0") format('woff2'),
       url("#{resource['font-awesome:fonts/fontawesome-webfont.woff']}&amp;v=4.3.0") format('woff'),
       url("#{resource['font-awesome:fonts/fontawesome-webfont.ttf']}&amp;v=4.3.0") format('truetype'),
       url("#{resource['font-awesome:fonts/fontawesome-webfont.svg']}&amp;v=4.3.0#fontawesomeregular") format('svg');
  font-weight: normal;
  font-style: normal;
}</code>

ログイン後にコピー

追加の考慮事項:

CSS ファイルを変更した後、サーバーを再起動します。
MIME マッピングを web.xml に追加します。 JSF1091 警告が発生した場合は、フォントファイルの種類を確認してください。
OmniFaces を使用している場合は、UnmappedResourceHandler をインストールし、FacesServlet マッピングを再構成することを検討してください。

参考資料: