Comment utiliser les icônes Font Awesome de webjars.org dans une application JSF sans dépendance à un serveur externe ?

Utilisation de Font Awesome de webjars.org avec JSF

Introduction
Intégration des icônes Font Awesome dans votre JSF L'application peut améliorer son attrait visuel et améliorer l'expérience utilisateur. Cependant, s’appuyer sur des serveurs externes pour ces ressources n’est pas idéal. Cet article explore une solution utilisant le projet webjars pour regrouper les ressources nécessaires dans votre fichier WAR.

Problème
Utilisation du code suivant pour inclure Font Awesome :

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

entraînait des icônes cassées et des erreurs de console indiquant que les polices n'étaient pas trouvées aux chemins spécifiés :

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

Solution
Le problème réside dans le mappage JSF manquant et nom de la bibliothèque dans les URL des ressources. Pour résoudre ce problème, utilisez l'expression #{resource} dans le fichier CSS pour générer les URL de ressources JSF appropriées :

src: url("#{resource['webjars:font-awesome/3.2.1/font/fontawesome-webfont.eot']}&v=3.2.1");
...

Cependant, comme cela implique de modifier le code source, une solution alternative consiste à utiliser la bibliothèque OmniFaces. UnmappedResourceHandler :

1. Installer OmniFaces (par exemple, en utilisant Maven)
2. Enregistrer UnmappedResourceHandler dans faces-config.xml :

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

3. Ajouter /javax.faces.resource/* vers le mappage FacesServlet :

<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 vers le nom de la ressource dans le fichier tag :

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

En suivant ces étapes, les icônes Font Awesome devraient désormais s'afficher correctement dans votre application JSF, sans avoir besoin de recourir à des serveurs externes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!