Font Awesome を JSF と統合し、フォント ファイルの問題を解決するにはどうすればよいですか?

Font Awesome と JSF の統合: フォント ファイルの問題の解決

Font Awesome を JSF に組み込むと、ブラウザーにアイコンの代わりに空の四角形が表示される問題が発生する場合があります。このエラーは、CSS ファイルが相対パスを使用してフォント ファイルを参照している場合に、JSF がリソース処理に使用する変更されたパスが原因で解決できない場合に発生します。

問題について

デフォルトの Font Awesome CSS ファイル../fonts/ のような相対パスを使用してフォント ファイルを参照します。ただし、 を使用して CSS ファイルを JSF に含めると、JSF は特別な /javax.faces.resource を割り当てます。 /* JSF リソース ハンドラーを呼び出すリソースのプレフィックス。

解決策: CSS 参照の変更

問題を解決するには、CSS ファイルを編集し、相対的なフォント ファイル参照を置き換える必要があります。 #{resource} EL マッピングと適切なライブラリ名とリソース名を使用した絶対参照。たとえば、

WebContent
 |-- resources
 |    `-- font-awesome
 |         |-- css
 |         |    |-- font-awesome.css
 |         |    `-- font-awesome.min.css
 |         `-- fonts
 |              |-- fontawesome-webfont.eot
 |              |-- fontawesome-webfont.svg
 |              |-- fontawesome-webfont.ttf
 |              |-- fontawesome-webfont.woff
 |              `-- fontawesome-webfont.woff2

のような構造では、CSS ファイルを次のように編集します。

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

Mime Type Mappings と JSF1091 Warnings

JSF1091 が発生する可能性もあります。特定のファイル タイプに MIME タイプ マッピングがない場合に警告が表示されます。たとえば、SVG ファイルや WOFF2 ファイルなどです。これを解決するには、次の MIME マッピングを web.xml に追加します。

<code class="xml"><mime-mapping>
    <extension>eot</extension>
    <mime-type>application/vnd.ms-fontobject</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>otf</extension>
    <mime-type>font/opentype</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>svg</extension>
    <mime-type>image/svg+xml</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>ttf</extension>
    <mime-type>application/x-font-ttf</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>woff</extension>
    <mime-type>application/x-font-woff</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>woff2</extension>
    <mime-type>application/x-font-woff2</mime-type>
</mime-mapping></code>

OmniFaces を使用した代替アプローチ

OmniFaces を使用している場合は、OmniFaces UnmappedResourceHandler をインストールし、FacesServlet を再構成できます。不足している MIME タイプ マッピングを自動的に処理するためのマッピング。ただし、この場合、library 属性を使用せずにフォント CSS ファイルを参照する必要があります:

<code class="xml"><outputstylesheet name="font-awesome/css/font-awesome.min.css"></outputstylesheet></code>

追加リソース

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

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