如何从webjars.org和JSF使用Font Awesome

我正在尝试在我的JSF应用程序中使用Font Awesome图标。 按照入门指示 ，并在我的视图的<h:head>部分添加以下内容，我已经取得了一些成功： 

 <link href="font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />

当我使用icon-home类时，这给了我一个不错的主页图标：

在这里输入图像描述

但是，我不想依赖引导服务器提供Font Awesome资源，所以我试图将这些与我的战争捆绑在一起，并configuration我的视图以使用捆绑的资源。

我正在使用由webjars项目创build的预制JAR 。 我的pom具有以下依赖性： 

 <dependency> <groupId>org.webjars</groupId> <artifactId>font-awesome</artifactId> <version>3.2.1</version> </dependency>

这将JAR放在我的WAR的WEB-INF / lib目录中。 JAR结构的相关部分是： 

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

但是，这使以前工作的主页图标如下所示：

在这里输入图像描述

我的浏览器（Chrome）在控制台显示以下错误（domain / port / context-root被修改为保护无辜者）： 

 GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.woff?v=3.2.1 404 (Not Found) GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.ttf?v=3.2.1 404 (Not Found) GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.svg 404 (Not Found)

所以它看起来像虽然css文件被正确parsing，包含css文件引用的字体的文件无法find。 我已经在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');

这些path是相对于CSS资源，所以我认为JSF应该没有问题find它。 现在我不知道该怎么做。

任何指针将是伟大的！ 干杯。

这些URL中缺lessJSF映射和库名称。 如果您已经将*.xhtml FacesServlet映射到*.xhtml ，那么这些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");

但是，由于源代码实际上不受您的控制（您无法编辑它），因此您无法自行pipe理资源处理。 JSF实用程序库OmniFaces提供UnmappedResourceHandler出于确切目的。 通过以下步骤，您的问题应该得到解决：

  1. 安装OmniFaces，它也可以在Maven上使用。 

     <dependency> <groupId>org.omnifaces</groupId> <artifactId>omnifaces</artifactId> <version><!-- Check omnifaces.org for current version. --></version> </dependency>

  2. 在faces-config.xml注册UnmappedResourceHandler ，如下所示： 

     <application> <resource-handler>org.omnifaces.resourcehandler.UnmappedResourceHandler</resource-handler> </application>

  3. 将/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>

  4. 将<h:outputStylesheet>库名称移动到资源名称中。 

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

  5. 利润。

上面的答案有点过时了。 从某些版本开始，font-awesome的webjar版本包含一个特定的jsf-ified版本的css，所以没有什么可configuration的。 通过maven将jar添加到你的项目中 

 <dependency> <groupId>org.webjars</groupId> <artifactId>font-awesome</artifactId> <version>4.6.3</version> </dependency>

或直接，它只是工作。 只要确保你包含正确的CSS 

 <h:outputStylesheet library="webjars" name="font-awesome/4.6.3/css/font-awesome-jsf.css" />

请注意名称中的-jsf！ 这样，你可以随时在你的应用程序中拥有最新版本，而不需要PF释放新的东西

除了BalusC的答案之外，将下面的mime-mapping添加到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>

除了BalusC和Hatem Alimam的回答，这也可以通过增加： 

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

根据这个链接

Interesting Posts