Comment intégrer Font Awesome à JSF et résoudre les problèmes de fichiers de polices ?

Intégration de Font Awesome avec JSF : résolution des problèmes de fichiers de polices

Lors de l'intégration de Font Awesome dans JSF, vous pouvez rencontrer un problème où le navigateur affiche des carrés vides au lieu d'icônes. Cette erreur se produit lorsque le fichier CSS fait référence à des fichiers de polices à l'aide de chemins relatifs qui ne parviennent pas à être résolus en raison du chemin modifié utilisé par JSF pour la gestion des ressources.

Comprendre le problème

Les fichiers CSS Font Awesome par défaut référencez les fichiers de polices en utilisant des chemins relatifs tels que ../fonts/. Cependant, lorsque vous incluez le fichier CSS dans JSF à l'aide de , JSF attribue une ressource spéciale /javax.faces. /* préfixe de la ressource pour appeler le gestionnaire de ressources JSF.

Solution : modifier les références CSS

Pour résoudre le problème, vous devez modifier le fichier CSS et remplacer les références relatives du fichier de police avec des références absolues en utilisant le mappage EL #{resource} et les noms de bibliothèques et de ressources appropriés. Par exemple, dans une structure telle que :

WebContent
 |-- resources
 |    `-- font-awesome
 |         |-- css
 |         |    |-- font-awesome.css
 |         |    `-- font-awesome.min.css
 |         `-- fonts
 |              |-- fontawesome-webfont.eot
 |              |-- fontawesome-webfont.svg
 |              |-- fontawesome-webfont.ttf
 |              |-- fontawesome-webfont.woff
 |              `-- fontawesome-webfont.woff2

Modifiez le fichier CSS comme suit :

<code class="css">@font-face {
  font-family: 'FontAwesome';
  src: url("#{resource['font-awesome:fonts/fontawesome-webfont.eot']}&amp;v=4.3.0");
  src: url("#{resource['font-awesome:fonts/fontawesome-webfont.eot']}&amp;#iefix&amp;v=4.3.0") format('embedded-opentype'),
       url("#{resource['font-awesome:fonts/fontawesome-webfont.woff2']}&amp;v=4.3.0") format('woff2'),
       url("#{resource['font-awesome:fonts/fontawesome-webfont.woff']}&amp;v=4.3.0") format('woff'),
       url("#{resource['font-awesome:fonts/fontawesome-webfont.ttf']}&amp;v=4.3.0") format('truetype'),
       url("#{resource['font-awesome:fonts/fontawesome-webfont.svg']}&amp;v=4.3.0#fontawesomeregular") format('svg');
  font-weight: normal;
  font-style: normal;
}</code>

Mappages de types MIME et avertissements JSF1091

Vous pouvez également rencontrer JSF1091 avertissements si certains types de fichiers n'ont pas de mappages de type MIME. Par exemple, les fichiers SVG et WOFF2. Pour résoudre ce problème, ajoutez les mappages MIME suivants à web.xml :

<code class="xml"><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>svg</extension>
    <mime-type>image/svg+xml</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></code>

Approche alternative avec OmniFaces

Si vous utilisez OmniFaces, vous pouvez installer OmniFaces UnmappedResourceHandler et reconfigurer FacesServlet. mappage pour gérer automatiquement les mappages de types MIME manquants. Cependant, vous devez référencer le fichier CSS de la police sans utiliser l'attribut library dans ce cas :

<code class="xml"><h:outputStylesheet name="font-awesome/css/font-awesome.min.css" / ></code>

Ressources supplémentaires

• [Comment utiliser Font Awesome de webjars.org avec JSF](https://stackoverflow.com/questions/21419280/how-to-use-font-awesome-from-webjars-org-with-jsf)

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!