如何將 Font Awesome 與 JSF 整合並解決字體檔案問題？-css教學-PHP中文網

如何將 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/）引用字體檔案。但是，當您使用在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']}&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 類型對應和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"><h:outputStylesheet name="font-awesome/css/font-awesome.min.css" / ></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中文網其他相關文章！