Как использовать Font Awesome с webjars.org с 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

По сути, вы должны использовать #{resource} в файле CSS для печати правильного URL-адреса ресурса JSF:

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 из коробки для точной цели. С помощью следующих шагов ваша проблема должна быть решена:

1. Установите OmniFaces, он также доступен в Maven.

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

2. Зарегистрируйте UnmappedResourceHandler в faces-config.xml следующим образом:

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

3. Добавьте сопоставление /javax.faces.resource/* с FacesServlet, предполагая, что имя сервлета 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-версию css, поэтому настраивать нечего. Добавьте банку в свой проект либо через maven

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

По этой ссылке

Для Primefaces 6.2 у меня это тоже сработало.

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

и в xhtml-файле:

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

имейте в виду, что вам нужно изменить использование с 4 на 5, например, с fa fa-plus на fas fa-plus, в зависимости от веб-страницы - https://fontawesome.com/icons/plus?style=solid