Comment utiliser Font Awesome avec JSF : pourquoi mes icônes affichent-elles des carrés vides ?

Accès aux fichiers de polices Font Awesome dans JSF

L'intégration de Font Awesome avec JSF nécessite de prendre en compte la façon dont le fichier CSS référence les fichiers de polices. Par défaut, le fichier CSS Font Awesome utilise des chemins relatifs, ce qui peut entraîner des problèmes lors de l'accès aux fichiers via le système de mappage de ressources JSF.

Cause première des carrés de police vides

Dans JSF, l'attribut <h:outputStylesheet> La balise avec un attribut de bibliothèque spécifié utilise un préfixe de chemin spécial de /javax.faces.resource/* pour accéder aux ressources. Lorsque le fichier CSS Font Awesome est accessible via ce chemin, les chemins relatifs dans le fichier CSS deviennent incorrects, ce qui empêche le navigateur de trouver les fichiers de police.

Solution : Ajuster les références des fichiers CSS

Pour résoudre ce problème, le fichier CSS Font Awesome doit être modifié pour utiliser des expressions EL pour référencer les fichiers de polices via le mappage #{resource}. Par exemple, l'extrait de code suivant met à jour les références du fichier de police :

<code class="css">@font-face {
  font-family: 'FontAwesome';
  src: url("#{resource['font-awesome:fonts/fontawesome-webfont.eot']}&amp;amp;v=4.3.0");
  ...
}</code>

Remplacez tous les chemins relatifs par des expressions à l'aide du mappage #{resource}.

Considérations supplémentaires

• Redémarrez le serveur après avoir modifié le fichier CSS pour garantir que les modifications prennent effet.
• Si des avertissements apparaissent dans les journaux du serveur concernant les types MIME manquants pour les fichiers de polices, ajoutez les mappages MIME nécessaires vers web.xml.
• Vous pouvez également installer OmniFaces UnmappedResourceHandler pour simplifier le processus de gestion des ressources.
• Pour utiliser Font Awesome CSS sans l'attribut library, référencez le fichier directement dans JSF à l'aide de l'attribut name. :

<code class="html">&lt;h:outputStylesheet name=&quot;font-awesome/css/font-awesome.min.css&quot; /&gt;</code>

Ressources supplémentaires

• [Comment utiliser Font Awesome de webjars.org avec JSF](lien de référence pertinent)

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!