如何将 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']}&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 UnmappedResourceHandler 并重新配置 FacesServlet映射以自动处理丢失的 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中文网其他相关文章！