web-dev-qa-db-fra.com

Comment utiliser le fichier CSS Font Awesome 4.x avec JSF? Le navigateur ne trouve pas les fichiers de police

J'essaie d'intégrer Font Awesome dans JSF.

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

Mais le navigateur ne peut pas trouver les fichiers de polices. Ils apparaissent comme des carrés vides:

enter image description here

Je m'attendais à ce qu'ils ressemblent à ceux ci-dessous:

enter image description here

Comment cela est-il causé et comment puis-je le résoudre?

cssjsffont-awesome
8
AHméd Net

Le fichier CSS Font Awesome fait par défaut référence à ces fichiers de police via un chemin relatif ../ comme ci-dessous:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),
       url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),
       url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'),
       url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),
       url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Cela échouera si le fichier CSS lui-même est demandé sur un chemin différent. Le JSF <h:outputStylesheet> le fera si vous spécifiez l'attribut library. De plus, le JSF utilisera un motif de préfixe /javax.faces.resource/* spécial pour ces ressources, de sorte que le gestionnaire de ressources JSF soit appelé, ce qui permet une liberté de personnalisation. Les détails peuvent être trouvés dans À quoi sert la bibliothèque de ressources JSF et comment doit-elle être utilisée?

Fourni une structure de dossier comme ci-dessous,

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
 :

Et le CSS Font Awesome étant inclus comme ci-dessous:

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

Ensuite, vous devez modifier le fichier CSS comme indiqué ci-dessous pour utiliser le mappage #{resource} dans EL afin de référencer les fichiers de polices du dossier /resources avec la bibliothèque et le nom de ressource appropriés (et comme le nom de la bibliothèque se termine déjà en tant que paramètre de chaîne de requête, vous devez également le remplacer. ? par &, ce n'est pas nécessaire si vous n'utilisez pas un nom de bibliothèque).

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

Assurez-vous de redémarrer le serveur après avoir modifié le fichier CSS. La présence d'expressions EL dans un certain fichier CSS n'est détectée qu'une seule fois lors de la première lecture du fichier CSS par le gestionnaire de ressources JSF, puis mémorisée au niveau de l'application.

Si des avertissements JSF1091 apparaissent dans les journaux du serveur pour les fichiers de polices, comme ci-dessous:

AVERTISSEMENT: JSF1091: Aucun type mime n'a été trouvé pour le fichier [un fichier de police]. Pour résoudre ce problème, ajoutez un mappage de type mime aux applications web.xml.

Ensuite, vous devez agir en conséquence en ajoutant les mappages mime ci-dessous à web.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>

S'il vous arrive d'utiliser la bibliothèque d'utilitaires JSF OmniFaces , une alternative à l'édition du fichier CSS avec le mappage #{resource} consiste à installer OmniFaces UnmappedResourceHandler et à reconfigurer le mappage FacesServlet conformément à sa documentation. Vous devez simplement vous assurer que vous ne faites plus référence au fichier CSS de police via library:

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

Voir également:

22
BalusC

De plus, primefaces>5.11 a Font Awesome prêt à l'emploi 

Ajoutez simplement ce context-param à votre web.xml:

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

Ensuite, vous pouvez appliquer les icônes Font Awesome de cette façon:

<p:submenu label="Time"  icon="fa fa-clock-o">

Références:

3
Jalal Sordo

j'ai changé le chemin des fichiers oet, ttf, svg, woff dans le fichier "font-awesome.min.css" comme ceci: 

http://localhost:8080/Students_manager/javax.faces.resource/fontawesome-webfont.svg.xhtml?ln=font-awesome/fonts&v=4.2.0#fontawesomeregular

ça marche très bien pour moi mais je cherche toujours une autre solution car je devrais avoir un chemin dynamique et non statique comme "http://localhost:8080/Students_manager/..."

0
AHméd Net

Même réponse que BalusC avec quelques modifications. Remarque: j'intègre Metronic Theme.

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

il en va de même pour simple-line-icons.min.css

et comme BalusC a dit, ajoutez change web.xml en ajoutant les lignes dans sa réponse.

 enter image description here

0
usertest

J'ai changé le chemin dans "font-awesome.css" et je fonctionne bien

@font-face {
font-family: 'FontAwesome';
src: url('../resources/font-awesome-4.5.0/fonts/fontawesome-webfont.eot?v=4.5.0');
src: url('../resources/font-awesome-4.5.0/fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'),
    url('../resources/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'),
    url('../resources/font-awesome-4.5.0/fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'),
    url('../resources/font-awesome-4.5.0/fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'),
    url('../resources/font-awesome-4.5.0/fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular')
    format('svg');
font-weight: normal;
font-style: normal;

}

0
Andrei Lepsch