web-dev-qa-db-fra.com

Comment utiliser Font Awesome de webjars.org avec JSF

J'essaie d'utiliser Font Awesome icons avec mon application JSF. J'ai eu un certain succès en suivant les instructions pour commencer et en ajoutant ce qui suit à la section <h:head> de mon affichage:

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

Cela me donne une icône Nice home lorsque j'utilise la classe icon-home:

enter image description here

Toutefois, je ne veux pas dépendre du serveur d’amorçage pour fournir les ressources Font Awesome. C’est pourquoi je tente de les regrouper avec ma guerre et de configurer mes vues pour qu’elles utilisent les ressources fournies.

J'utilise le JAR préconfiguré créé par le webjars projet. Mon pom a la dépendance suivante:

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

Cela place le fichier JAR dans le répertoire WEB-INF/lib de mon fichier WAR. Les parties pertinentes de la structure du JAR sont les suivantes:

META-INF
  - MANIFEST.MF
  + maven
  - resources
    - webjars
      - font-awesome
        - 3.2.1
          - css
            - font-awesome.css
            - *other css files*
          - font
            - *font files*

J'ai essayé les éléments suivants pour inclure les icônes dans mon projet:

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

Cependant, l’icône de la maison qui travaillait précédemment a été transformée en:

enter image description here

Et mon navigateur (Chrome) affiche les erreurs suivantes dans la console (domain/port/context-root modifié pour protéger l'innocent;):

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)

Il semble donc que, même si le fichier css est résolu correctement, les fichiers contenant les polices citées dans le fichier css sont introuvables. J'ai vérifié ces références dans le fichier css et elles sont:

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');

Ces chemins sont relatifs à la ressource css, alors j’ai pensé que JSF ne devrait avoir aucun problème à le trouver. Maintenant, je ne sais pas quoi faire. 

Tous les indicateurs seraient géniaux! À votre santé.

cssjsfmavenfont-awesomewebjars
17
Ryan Bennetts

Le mappage JSF et le nom de la bibliothèque sont manquants dans ces URL. Si vous avez mappé votre FacesServlet sur *.xhtml, alors ces URL auraient dû être:

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

Pour l’essentiel, vous devriez utiliser #{resource} dans un fichier CSS pour imprimer l’URL de ressource JSF appropriée:

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");

Cependant, comme le code source est en dehors de votre contrôle (vous ne pouvez pas le modifier), il n’ya pas d’autre moyen de gérer vous-même les ressources. La bibliothèque d’utilitaires JSF - OmniFaces fournit la variable UnmappedResourceHandler out dans le but exact. Avec les étapes suivantes, votre problème devrait être résolu:

  1. Installez OmniFaces, il est également disponible sur Maven.

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

  2. Enregistrez UnmappedResourceHandler dans faces-config.xml comme suit:

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

  3. Ajoutez /javax.faces.resource/* au mappage FacesServlet, en supposant que le nom du servlet est facesServlet et que vous avez déjà un mappage sur *.xhtml:

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

  4. Déplacez le nom de la bibliothèque <h:outputStylesheet> dans le nom de la ressource.

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

  5. Profit.

26
BalusC

La réponse ci-dessus est en quelque sorte rendue obsolète. Depuis quelques versions, la version webjar de font-awesome inclut une version spécifique de css au format jsf, de sorte qu'il n'y a rien à configurer. Ajoutez le pot à votre projet, via maven 

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

ou directement et ça marche. Assurez-vous simplement d'inclure le bon css

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

Notez le -jsf dans le nom !!! De cette façon, vous pouvez toujours avoir la dernière version dans votre application et ne dépendez pas de la publication par PF de quelque chose de nouveau.

14
Kukeltje

En plus de la réponse BalusC, il est judicieux d’ajouter le mime-mapping suivant au 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>
6
Hatem Alimam

En plus deBalusCetHatem Alimam, cela pourrait également être utile en ajoutant:

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

Selon cette link

3
Danny P

Pour primefaces 6.2 aussi cela a bien fonctionné pour moi

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

et en fichier xhtml:

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

sachez que vous devez modifier l'utilisation de 4 à 5, par exemple fa fa-plus en fas fa-plus, en fonction de la page Web - https://fontawesome.com/icons/plus?style=solid

0
Betlista