如何將 Font Awesome 與 JSF 整合並解決字體檔案問題？

將Font Awesome 與JSF 整合：解決字體檔案問題

將Font Awesome 整合到JSF 時，您可能會遇到瀏覽器顯示空方塊而不是圖標的問題。當 CSS 檔案使用相對路徑引用字型檔案時，由於 JSF 用於資源處理的修改路徑而無法解析，則會出現此錯誤。

了解問題

預設的 Font Awesome CSS 檔案使用相對路徑（如 ../fonts/）引用字體檔案。但是，當您使用 在JSF 中包含CSS 檔案時，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 類型對應和JSF1091 警告

您可能還會遇到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 UnmappedRedlersSeret映射以自動處理丟失的mime 類型映射。但是，在這種情況下，您需要引用字體CSS 檔案而不使用函式庫屬性：

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

其他資源

• [How to use Font Awesome from webjars.org with JSF](https://stackoverflow.com/questions/21419280/how-to-use-font-awesome-from-webjars-org-with-jsf)

以上是如何將 Font Awesome 與 JSF 整合並解決字體檔案問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！