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

Question

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

Я пытаюсь использовать иконки Font 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. Мой пом имеет следующую зависимость:

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

Это помещает JAR в каталог WEB-INF/lib моей WAR. Отдельные части структуры 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 не должно возникнуть проблем с его поиском. Теперь я не уверен, что делать.

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

20

css maven jsf font-awesome webjars

Источник

user378606 19 сен '13 в 10:04

5 ответов

Решение

Ответ выше как бы устарел. Начиная с некоторых выпусков назад, версия web-jar font-awesome включает в себя определенную jss-версию 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 что-то новое

18

Источник

user4478047 22 фев '15 в 00:11

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

7

Источник

user833031 19 июн '14 в 09:10

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

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

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

3

Источник

user4855608 12 май '15 в 03:08

Для 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

2

Источник

user384674 26 ноя '18 в 17:08

Другие вопросы по тегам css maven jsf font-awesome webjars

user157882 19 сен '13 в 12:25 2013-09-19 12:25 · Accepted Answer · 2013-09-19 12:25

В этих 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} in CSS file to print the proper JSF resource 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 OmniFaces provides the UnmappedResourceHandler out the box for the exact purpose. With the following steps your problem should be solved:

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>

регистр UnmappedResourceHandler в faces-config.xml следующее:

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

добавлять /javax.faces.resource/* в FacesServlet mapping, assuming that the servlet name is facesServlet and 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>

Переместить <h:outputStylesheet> library name to into the resource name.
```
<h:outputStylesheet name="webjars/font-awesome/3.2.1/css/font-awesome.css" />
```
Прибыль.