如何在 JSF 中使用 Font Awesome 等 3rd 方 CSS 库?浏览器找不到 CSS 文件中引用的字体文件

问题描述 投票:0回答:6

我正在尝试将 Font Awesome 集成到 JSF 中。

<h:outputStylesheet library="font-awesome" name="css/font-awesome.min.css" />

但是浏览器找不到字体文件。它们显示为空方块:

enter image description here

我希望它们看起来像下面这样:

enter image description here

这是怎么造成的,如何解决?

css jsf font-awesome
6个回答
30
投票

Font Awesome CSS 文件默认通过相对路径引用这些字体文件

../
,如下所示:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),
       url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),
       url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'),
       url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),
       url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

如果在不同的路径上请求 CSS 文件本身,这将会失败。如果您指定

<h:outputStylesheet>
属性,JSF
library
将会执行此操作。此外,JSF 将为这些资源使用特殊的
/javax.faces.resource/*
前缀模式,以便专门调用 JSF 资源处理程序,从而允许自由定制。详细内容可以参见JSF资源库有什么用以及如何使用?

提供了如下所示的文件夹结构,

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
 :

Font Awesome CSS 包含如下:

<h:outputStylesheet library="font-awesome" name="css/font-awesome.min.css" />

然后您需要如下编辑 CSS 文件,以使用 EL 中的

#{resource}
映射来引用
/resources
文件夹中具有适当库和资源名称的字体文件(并且库名称最终已作为查询字符串参数,您还需要将
?
替换为
&
,如果您不使用库名称,则不需要)。

@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;
}

编辑 CSS 文件后,请确保重新启动服务器。仅在 JSF 资源处理程序第一次读取 CSS 文件期间检测到某个 CSS 文件中是否存在 EL 表达式,然后在整个应用程序中记住它。

如果您在服务器日志中看到这些字体文件的 JSF1091 警告,如下所示:

警告:JSF1091:找不到文件 [某些字体文件] 的 mime 类型。要解决此问题,请将 mime 类型映射添加到应用程序 web.xml。

然后您需要通过将以下 mime 映射添加到

web.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>

如果您碰巧使用 JSF 实用程序库 OmniFaces,使用

#{resource}
映射编辑 CSS 文件的替代方法是安装 OmniFaces
UnmappedResourceHandler
并根据其文档重新配置
FacesServlet
映射。您只需确保不再通过
library
引用字体 CSS 文件即可:

<h:outputStylesheet name="font-awesome/css/font-awesome.min.css" />

另请参阅:


4
投票

还有

primefaces>5.11
具有
Font Awesome
开箱即用

只需将此

context-param
添加到您的
web.xml
:

<context-param>
    <param-name>primefaces.FONT_AWESOME</param-name>
    <param-value>true</param-value>
</context-param>

然后你可以这样应用

Font Awesome
图标:

<p:submenu label="Time"  icon="fa fa-clock-o">

参考资料:


1
投票

我更改了“font-awesome.css”中的路径并且工作正常

@font-face {
font-family: 'FontAwesome';
src: url('../resources/font-awesome-4.5.0/fonts/fontawesome-webfont.eot?v=4.5.0');
src: url('../resources/font-awesome-4.5.0/fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'),
    url('../resources/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'),
    url('../resources/font-awesome-4.5.0/fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'),
    url('../resources/font-awesome-4.5.0/fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'),
    url('../resources/font-awesome-4.5.0/fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular')
    format('svg');
font-weight: normal;
font-style: normal;

}


0
投票

我在“font-awesome.min.css”文件中更改了 oet、ttf、svg、woff 文件的路径,如下所示:

http://localhost:8080/Students_manager/javax.faces.resource/fontawesome-webfont.svg.xhtml?ln=font-awesome/fonts&v=4.2.0#fontawesomeregular

它对我来说工作正常,但我仍在寻找另一个解决方案,因为我应该有一个动态路径,而不是像

"http://localhost:8080/Students_manager/..."

那样的静态路径

0
投票

BalusC 相同的答案,但有一些更改。注意:我正在集成 Metronic 主题。

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

同样适用于

simple-line-icons.min.css

正如 BalusC 所说,通过在他的答案中添加行来添加更改

web.xml


0
投票

您只需通过 pom.xml 手动包含它:

<!-- https://mvnrepository.com/artifact/org.webjars/font-awesome -->
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>font-awesome</artifactId>
    <version>6.5.1</version>
</dependency>

然后包含这两个 CSS 样式表(在模板中执行此操作以将它们加载到每个页面中)以启用它:

<h:outputStylesheet library="webjars" name="font-awesome/6.5.1/css/all.min-jsf.css" />
<h:outputStylesheet library="webjars" name="font-awesome/6.5.1/css/v4-shims.min-jsf.css" />
© www.soinside.com 2019 - 2024. All rights reserved.