Font Awesome を JSF と統合し、フォントファイルの問題を解決するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

DDD

リリース： 2024-10-29 13:08:02

オリジナル

240 人が閲覧しました

How to Integrate Font Awesome with JSF and Resolve Font File Issues?

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']}&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>

ログイン後にコピー

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"><h:outputStylesheet name="font-awesome/css/font-awesome.min.css" / ></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 サイトの他の関連記事を参照してください。

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

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

問題について

解決策: CSS 参照の変更

Mime Type Mappings と JSF1091 Warnings

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

追加リソース

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

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