Использование FontAwesome 5.x с PrimeFaces 6.2+ - PullRequest
Новая
       12

Использование FontAwesome 5.x с PrimeFaces 6.2+

0 голосов
/ 14 декабря 2018

Я проверял этот вопрос: Как использовать Font Awesome с webjars.org с JSF и этот вопрос: FontAwesome с PrimeFaces с его ответом https://stackoverflow.com/a/33070133/5113188

Привет! Я хочу использовать новые значки https://fontawesome.com/changelog/latest 5.5 версии

В моем pom.xml файле проекта ... 

    <dependency>
        <groupId>org.primefaces</groupId>
        <artifactId>primefaces</artifactId>
        <version>6.2</version>
    </dependency>
    <dependency>
        <groupId>org.primefaces.extensions</groupId>
        <artifactId>primefaces-extensions</artifactId>
        <version>6.2</version>
    </dependency>
    <dependency>
        <groupId>org.omnifaces</groupId>
        <artifactId>omnifaces</artifactId>
        <version>2.1</version>
    </dependency>


    <!-- https://mvnrepository.com/artifact/org.webjars/font-awesome -->
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>font-awesome</artifactId>
        <version>5.5.0</version>
    </dependency>

inмой web.xml файл 

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

В моем фейсбете .xhtml 

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/templates/template.xhtml">
    <ui:define name="body">
        <h:outputScript library="webjars" name="font-awesome/5.5.0/js/all.js"/>

...

    <p:spacer width="10"/>6
    <h:outputText styleClass="fas fas-map"/>7
    <h:outputText styleClass="fa fa-venus-mars fa-icon-custom" />
    <h:outputText styleClass="fa fa-female fa-icon-custom" />
    <h:outputText styleClass="fa fa-male fa-icon-custom" />

Примечание: я использую fas и fa, но ни один из них не работает

Как показано на моем изображении все значки не работают

enter image description here

Как решить эту проблему?

1 Ответ

0 голосов
/ 16 декабря 2018

Возможность использовать FontAwesome 5 была добавлена ​​в PF 6.2.12 и PF 6.3.Посмотрите этот тикет и сделайте коммит, который добавляет способность:

https://github.com/primefaces/primefaces/issues/4276

https://github.com/primefaces/primefaces/commit/c28c0bccc615bffb99c30825c8c7d8084c3a72da

Отключите поддержку PF по умолчанию в web.xml: 

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

Обновите ваш pom.xml. 

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

Используйте соответствующий CSS WebJars для JSF. 

<h:outputStylesheet library="webjars" name="font-awesome/5.8.2/css/all.min-jsf.css" />
<h:outputStylesheet library="webjars" name="font-awesome/5.8.2/css/v4-shims.min-jsf.css" />

ПРИМЕЧАНИЕ: Вам придется изменить свой "fa "как и сейчас Font Awesome разделен на разные категории, такие как" fas "," fab "и т. д. Пожалуйста, смотрите документацию здесь .

...