如何在JSF中使用第三方CSS库(如Font Awesome)?浏览器无法找到CSS文件中引用的字体文件

fxnxkyjh  于 11个月前  发布在  其他
关注(0)|答案(6)|浏览(107)

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

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

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


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



这是如何造成的,我该如何解决?

af7jpaap

af7jpaap1#

默认情况下,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文件本身在不同的路径上被请求,这将失败。如果您指定library属性,JSF <h:outputStylesheet>将执行此操作。此外,JSF将为这些资源使用特殊的/javax.faces.resource/*前缀模式,以便专门调用JSF资源处理程序,从而允许自定义自由。详细信息可在What is the JSF resource library for and how should it be used?中找到
提供了如下的文件夹结构,

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}Map来引用/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:找不到文件[some font file]的mime类型。若要解决此问题,请将mime类型Map添加到应用程序web.xml。
然后,您需要相应地采取行动,将下面的mimeMap添加到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}Map编辑CSS文件的替代方法是安装OmniFaces UnmappedResourceHandler并根据其文档重新配置FacesServletMap。您只需确保不再通过library引用字体CSS文件:

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

参见:

ijnw1ujt

ijnw1ujt2#

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">


参考文献:

jobtbby3

jobtbby33#

我改变了路径“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;

字符串
}

vlurs2pr

vlurs2pr4#

你只需要通过你的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" />

lf5gs5x2

lf5gs5x25#

我改变了oet的路径,ttf,svg,woff文件在“font-awesome.min.css”文件像这样:

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/..."静态

6gpjuf90

6gpjuf906#

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


的数据

相关问题