Css 如何在JSF中使用webjars.org中的字体Awesome
我试图在我的JSF应用程序中使用图标。通过遵循并将以下内容添加到视图的Css 如何在JSF中使用webjars.org中的字体Awesome,css,jsf,maven,font-awesome,webjars,Css,Jsf,Maven,Font Awesome,Webjars,我试图在我的JSF应用程序中使用图标。通过遵循并将以下内容添加到视图的部分,我取得了一些成功: <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" /> 这将JAR放在我的WAR的WEB-INF/lib目录中。罐结构的相关部分包括: META-INF - MANIFEST.MF + maven - resources
部分,我取得了一些成功:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"
rel="stylesheet" />
这将JAR放在我的WAR的WEB-INF/lib目录中。罐结构的相关部分包括:
META-INF
- MANIFEST.MF
+ maven
- resources
- webjars
- font-awesome
- 3.2.1
- css
- font-awesome.css
- *other css files*
- font
- *font files*
我已尝试在我的项目中包含以下图标:
<h:outputStylesheet library="webjars"
name="font-awesome/3.2.1/css/font-awesome.css" />
因此,看起来虽然css文件已正确解析,但无法找到包含css文件所引用字体的文件。我已经检查了css文件中的这些引用,它们是:
src: url('../font/fontawesome-webfont.eot?v=3.2.1');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
这些路径是相对于css资源的,所以我认为JSF应该可以找到它。现在我不知道该怎么办
任何指针都会很棒!干杯。这些URL中缺少JSF映射和库名称。如果您已经在
*.xhtml
上映射了FacesServlet
,那么这些URL实际上应该是:
GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.woff.xhtml?ln=webjars&v=3.2.1
GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.ttf.xhtml?ln=webjars&v=3.2.1
GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.svg.xhtml?ln=webjars
基本上,您应该在CSS文件中使用#{resource}
来打印正确的JSF资源URL:
src: url("#{resource['webjars:font-awesome/3.2.1/font/fontawesome-webfont.eot']}&v=3.2.1");
src: url("#{resource['webjars:font-awesome/3.2.1/font/fontawesome-webfont.eot']}&#iefix&v=3.2.1");
但是,由于源代码实际上不在您的控制范围内(您无法编辑它),因此没有其他方法可以自行管理资源。JSF实用程序库提供了开箱即用的功能。通过以下步骤,您的问题应该得到解决:
<dependency>
<groupId>org.omnifaces</groupId>
<artifactId>omnifaces</artifactId>
<version><!-- Check omnifaces.org for current version. --></version>
</dependency>
/javax.faces.resource/*
添加到FacesServlet
映射,假设servlet名称为FacesServlet
,并且您已经在*.xhtml
上有映射:
<servlet-mapping>
<servlet-name>facesServlet</servlet-name>
<url-pattern>/javax.faces.resource/*</url-pattern>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
小脸蛋
/javax.faces.resource/*
*.xhtml
<h:outputStylesheet name="webjars/font-awesome/3.2.1/css/font-awesome.css" />
除了BalusC answer之外,最好将以下
mime映射添加到web.xml
<!-- web fonts -->
<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>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>
<mime-mapping>
<extension>svg</extension>
<mime-type>image/svg+xml</mime-type>
</mime-mapping>
<mime-mapping>
<extension>ico</extension>
<mime-type>image/x-icon</mime-type>
</mime-mapping>
eot
应用程序/vnd.ms-fontobject
otf
字体/开放式
ttf
应用程序/x-font-ttf
沃夫
应用程序/x-font-woff
沃夫2
应用程序/x-font-woff2
svg
image/svg+xml
ico
图像/x图标
上面的答案有点过时了。自从以前的一些版本以来,FontAwesome的webjar版本包括一个特定的jsf-ified版本的css,因此没有任何配置。将jar添加到您的项目中,或者
org.webjars
字体真棒
4.6.3
或者直接,它只是工作。只需确保包含正确的css即可
<h:outputStylesheet library="webjars" name="font-awesome/4.6.3/css/font-awesome-jsf.css" />
注意名称中的-jsf!!!这样,您的应用程序中始终可以有最新版本,而不必依赖PF发布新的内容。除了BalusC和Hatem Alimam答案之外,还可以添加以下内容:
<context-param>
<param-name>primefaces.FONT_AWESOME</param-name>
<param-value>true</param-value>
</context-param>
primefaces.FONT\u太棒了
真的
根据这个对于primefaces 6.2,这对我来说也很好
<dependency>
<groupId>org.webjars</groupId>
<artifactId>font-awesome</artifactId>
<version>5.5.0</version>
</dependency>
org.webjars
不确定是否适合将其放在这里,但是,此解决方案工作正常,但最终会破裂(我想,这也会破坏。我猜是因为这些依赖于未映射的资源来导出文件供下载?我在日志中得到了类似的东西:警告:JSF1091:找不到文件s01a3dc15-c480-4769-a71a-bc08f191416f的mime类型。@wsaxton:哪个OmniFaces版本?从1.8开始就有一个识别PF动态的黑客资源,这样它就可以相应地进行授权。我使用的是1.8。那么还有其他方法吗?(顺便说一句,我在另一篇文章中问过这个问题,如果你想回答的话:)@balusc:答案可以简化,请看下面我的答案。如果你想知道为什么这不适用于5.8.1版本的font awesome,也许你可以编辑这个。我告诉你:现在罐子里的路径不同了。你必须使用“webjars/font awesome/5.8.1/css/fontawesome.css”作为路径。@BalusC-你回答了我几乎所有关于JSF的问题:)非常感谢。是的,primefaces从5.2版开始就开箱即用。这是我现在使用的方法。但在这种方法中,您将始终落后于最新的字体很棒的版本。添加您自己的字体并在我的回答中使用它可以确保最新的用户使用css变体:
在版本5.x.x的很棒字体中有一些更改,并且正在工作给我打电话。
<dependency>
<groupId>org.webjars</groupId>
<artifactId>font-awesome</artifactId>
<version>4.6.3</version>
</dependency>
<h:outputStylesheet library="webjars" name="font-awesome/4.6.3/css/font-awesome-jsf.css" />
<context-param>
<param-name>primefaces.FONT_AWESOME</param-name>
<param-value>true</param-value>
</context-param>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>font-awesome</artifactId>
<version>5.5.0</version>
</dependency>
<h:outputScript library="webjars" name="font-awesome/5.5.0/js/all.js"/>