CSS 如何使用来自 webjars.org 的 Font Awesome 和 JSF

Question

提问by Ryan Bennetts

I am trying to use Font Awesomeicons with my JSF application. I have had some success by following the getting started instructionsand adding the following to my view's <h:head>section:

我正在尝试在我的 JSF 应用程序中使用Font Awesome图标。通过遵循入门说明并将以下内容添加到我的视图<h:head>部分，我取得了一些成功：

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

This gives me a nice home icon when I use the icon-homeclass:

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

enter image description here

在此处输入图片说明

However, I don't want to be dependent on the bootstrap server to provide the Font Awesome resources, so I am trying to bundle these with my war, and configure my views to use the bundled resources.

但是，我不想依赖引导服务器来提供 Font Awesome 资源，因此我尝试将这些与我的War捆绑在一起，并配置我的视图以使用捆绑的资源。

I am using the pre-made JARcreated by the webjarsproject. My pom has the following dependency:

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

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

This places the JAR in my WAR's WEB-INF/lib directory. The relevent parts of the JAR's structure are:

这会将 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*

I have tried the following to include the icons in my project:

我尝试了以下方法在我的项目中包含图标：

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

However, this renders the previously working home icon as:

但是，这会将以前工作的主页图标呈现为：

enter image description here

在此处输入图片说明

And my browser (Chrome) shows the following errors in the console (domain/port/context-root changed to protect the innocent ;):

我的浏览器（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)

So it looks like although the css file is resolved properly, the files which contain the fonts that the css file refers to cannot be found. I have checked those references in the css file and they are:

所以看起来虽然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');

Those paths are relative to the css resource, so I thought JSF should have no problem finding it. Now I'm not sure what to do.

这些路径是相对于 css 资源的，所以我认为 JSF 找到它应该没有问题。现在我不知道该怎么办。

Any pointers would be great! Cheers.

任何指针都会很棒！干杯。

Answer 1

回答by BalusC

The JSF mapping and library name is missing in those URLs. If you've mapped your FacesServleton *.xhtml, then those URLs should actually have been:

这些 URL 中缺少 JSF 映射和库名称。如果您已经映射了FacesServleton *.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

Essentially, you should be using #{resource}in CSS file to print the proper JSF resource URL:

本质上，您应该#{resource}在 CSS 文件中使用来打印正确的 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");

However, as the source code is actually outside your control (you can't edit it), then there's no other way to manage the resource handling yourself. The JSF utility library OmniFacesprovides the UnmappedResourceHandlerout the box for the exact purpose. With the following steps your problem should be solved:

但是，由于源代码实际上不在您的控制范围内（您无法对其进行编辑），因此没有其他方法可以自行管理资源处理。JSF 实用程序库OmniFaces提供了UnmappedResourceHandler开箱即用的功能。通过以下步骤，您的问题应该得到解决：

Install OmniFaces, it's available on Maven as well.

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

Register UnmappedResourceHandlerin faces-config.xmlas follows:

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

Add /javax.faces.resource/*to FacesServletmapping, assuming that the servlet name is facesServletand you've already a mapping on *.xhtml:

<servlet-mapping>
    <servlet-name>facesServlet</servlet-name>
    <url-pattern>/javax.faces.resource/*</url-pattern>
    <url-pattern>*.xhtml</url-pattern>
</servlet-mapping>

Move the <h:outputStylesheet>library name to into the resource name.

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

Profit.

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

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

注册UnmappedResourceHandler于faces-config.xml如下：

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

利润。

Answer 2

回答by Kukeltje

The answer above is kind of made obsolete. Since some releases ago, the webjar version of font-awesome includes a specific jsf-ified version of the css so there is nothing to configure. Add the jar to your project, either via maven

上面的答案有点过时了。从之前的一些版本开始，font-awesome 的 webjar 版本包含一个特定的 jsf 化版本的 css，因此无需配置。通过Maven将 jar 添加到您的项目中

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

or directly and it just works. Just make sure you include the correct css

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

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

Note the -jsf in the name!!! This way you can always have the latest version in your application and do not depend on PF releasing something new

注意名称中的 -jsf ！！！这样你就可以在你的应用程序中始终拥有最新版本，而不依赖于 PF 发布新的东西

Answer 3

回答by Hatem Alimam

In addition to BalusC answer, it's a good idea to add the following mime-mappings to the web.xml

除了 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>

Answer 4

回答by Danny P

In addition to BalusCand Hatem Alimamanswers, this could be useful too by adding:

除了BalusC和Hatem Alimam 的答案，这也可能有用，添加：

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

According to this link

根据这个链接

Answer 5

回答by Betlista

For primefaces 6.2 also this worked fine for me

对于primefaces 6.2，这对我来说也很好用

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

and in xhtml file:

并在 xhtml 文件中：

<h:outputScript library="webjars" name="font-awesome/5.5.0/js/all.js"/>

be aware, that you have to change the usage from 4 to 5, for example fa fa-plusto fas fa-plus, based on web page - https://fontawesome.com/icons/plus?style=solid

请注意，您必须将用法从 4 更改为 5，例如fa fa-plus更改为fas fa-plus，基于网页 - https://fontawesome.com/icons/plus?style=solid

CSS 如何使用来自 webjars.org 的 Font Awesome 和 JSF

提问by Ryan Bennetts

回答by BalusC

回答by Kukeltje

回答by Hatem Alimam

回答by Danny P

回答by Betlista

相关推荐

最近更新

标签

CSS 如何使用来自 webjars.org 的 Font Awesome 和 JSF

提问by Ryan Bennetts

回答by BalusC

回答by Kukeltje

回答by Hatem Alimam

回答by Danny P

回答by Betlista

相关推荐

CSS 在两个 Bootstrap 列之间创建用户定义的间隙

CSS 从 Chrome/Webkit 中的 <select> 元素中移除圆角

带时间间隔的 CSS 动画

CSS 如何使用 chrome web 检查器查看悬停代码

相关推荐

最近更新

标签