Как использовать шрифт Awesome с webjars.org с JSF

Я пытаюсь использовать значки шрифта Awesome с моим приложением JSF. У меня был некоторый успех, следуя начинающим инструкциям и добавив следующее в мой раздел <h:head>:

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

Это дает мне хороший значок дома, когда я использую класс icon-home:

Однако я не хочу зависеть от сервера начальной загрузки, чтобы предоставить ресурсы Font Awesome, поэтому я пытаюсь связать их с моей войной и настраивать свои представления для использования связанных ресурсов.

Я использую готовый JAR, созданный webjars. Мой 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 не должно быть проблем с поиском. Теперь я не уверен, что делать.

Любые указатели были бы замечательными! Приветствия.

Ответ 1

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

Установите 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 сопоставление, предполагая, что имя сервлета 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" />
```
Profit.

Ответ 2

Вышеприведенный ответ отчасти устарел. Начиная с некоторых выпусков назад, версия webjar font-awesome включает определенную jsf-ified версию 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 выпустит что-то новое

Ответ 3

В дополнение к ответу 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>

Ответ 4

В дополнение к ответам BalusC и Hatem Alimam это может быть полезно, добавив:

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

В соответствии с этой ссылкой