css – 如何使用JSF从webjars.org使用Font Awesome

前端之家收集整理的这篇文章主要介绍了css – 如何使用JSF从webjars.org使用Font Awesome前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试使用我的JSF应用程序的 Font Awesome图标。按照 getting started instructions,我已经取得了一些成功,并将以下内容添加到我的视图的< h:head>部分:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"
      rel="stylesheet" />

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

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

我正在使用由webjars项目创建的pre-made 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)在控制台中显示以下错误(域/端口/上下文根被更改为保护无辜者);

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文件被正确解析,但是包含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映射和库名称。如果您将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");

但是,由于源代码实际上不在您的控制之下(您无法编辑它),所以没有其他方法可以自己管理资源处理。 JSF实用程序库OmniFaces为确切的目的提供了UnmappedResourceHandler开箱。通过以下步骤您的问题应该解决

>安装OmniFaces,它也可以在Maven上使用。

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

>在faces-config.xml中注册UnmappedResourceHandler,如下所示:

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

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

>移动< h:outputStylesheet>库名称转入资源名称

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

>利润。

猜你在找的CSS相关文章