Comment faire pour utiliser la Police Impressionnant 4.x fichier CSS avec la JSF? Le navigateur ne peut pas trouver les fichiers de police

Je suis en train d'intégrer Police Impressionnant en JSF.

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

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

Je m'attendais à ressembler à ci-dessous:

Comment faire pour utiliser la Police Impressionnant 4.x fichier CSS avec la JSF? Le navigateur ne peut pas trouver les fichiers de police

Comment est-il la cause et comment puis-je le résoudre?

qu'avez-VOUS étudier?
Lire stackoverflow.com/tags/jsf/info --> "Toutes les faces des messages ou des avertissements/erreurs/exceptions dans le navigateur de la console ou d'un serveur de logs?" et de mettre à jour votre question en conséquence. Sûrement le webbrowser doit avoir donné des indices.
merci vous avez raison, monsieur, il y a de nombreuses erreurs : je n'arrive pas à trouver de nombreux fichiers comme les "fonts/fontawesome-webfont.ttf?v=4.2.0"
Double Possible de Comment puis-je intégrer la Police Génial 4.3.0 avec JSF?

OriginalL'auteur AHméd Net | 2015-07-15

22

La Police Génial fichier CSS est par défaut le référencement de ces fichiers de police par l'intermédiaire d'un chemin d'accès 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;
}
```
Ceci ne fonctionnera pas si le fichier CSS en lui-même est demandé sur un chemin différent. La JSF <h:outputStylesheet> fera que si vous spécifiez le library attribut. En outre, le JSF sera d'utiliser une /javax.faces.resource/* préfixe de modèle pour ces ressources, de sorte que spécifiquement dans le cadre du programme de ressources gestionnaire sera invoqué, qui permet la personnalisation de la liberté. Les détails peuvent être trouvés dans Qu'est-ce que le JSF bibliothèque de ressources et comment doit-il être utilisé?

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 la Police Génial CSS être inclus en tant que ci-dessous:
```
<h:outputStylesheet library="font-awesome" name="css/font-awesome.min.css" />
```
Ensuite, vous devez modifier le fichier CSS comme ci-dessous pour utiliser #{resource} cartographie EL de référence les fichiers de police dans /resources dossier avec la bibliothèque et le nom de la ressource (et comme le nom de la bibliothèque se termine comme un paramètre de chaîne de requête déjà, vous devez également remplacer ? par &, ce n'est pas nécessaire si vous n'utilisez pas le nom d'une 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 de EL expressions dans un certain fichier CSS est détecté qu'une seule fois durant la première fois dans le cadre du programme de ressources gestionnaire lit le fichier CSS, puis se souvint de applicationwide.

Dans le cas où vous voyez JSF1091 avertissements dans les journaux du serveur pour ceux des fichiers de police, comme ci-dessous:

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

Ensuite, vous devez agir en conséquence en ajoutant au-dessous de types mime pour 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>
```
Si vous arrive d'utiliser JSF bibliothèque utilitaire OmniFaces, une alternative à l'édition du fichier CSS avec le #{resource} de cartographie, est d'installer le OmniFaces UnmappedResourceHandler et reconfigurer le FacesServlet cartographie conformément à sa documentation. Vous avez seulement besoin de s'assurer que vous ne faites pas référence à la police de fichier CSS via library plus:
```
<h:outputStylesheet name="font-awesome/css/font-awesome.min.css" />
```
Voir aussi:
- Comment faire pour utiliser la Police Impressionnant de webjars.org avec JSF
Merci c'est du travail pour moi, mais vous devez remplacer les "?" par "&", comme ça : url('localhost:8080/Students_manager/javax.des visages.ressources/...) format('truetype'),
Droit, négligé que peu. Fixe.
à l'aide de la police-génial rom webjars contient toutes ces choses. Je pense qu'il y a même une SORTE de Q/r à ce sujet. Façon plus facile à maintenir
Le mappage mime dans web.xml travaillé pour moi, j'ai juste eu à enlever la tmp contenu dans jboss7 (a fallu plus d'un jour pour résoudre ce joint.O )
dans le cas où quelqu'un en a besoin, j'ai créé une regex pour elle: recherche: l'url('\.\./(([a-zA-Z/-]+)\.([eotsvgttfwoffwoff2]{1,5}))'{0,1}([?\.&=#a-zA-Z0-9]{0,})'{1} remplacer par: url("#{ressource['externe:fontawesome/$2.$3']}&$4" où mon répertoire est comme wepapp/externe/fontawesome .. vous pourriez avoir besoin d'ajuster que

OriginalL'auteur BalusC
3

Aussi primefaces>5.11 a Font Awesome hors de la boîte

Il suffit d'ajouter ce context-param à votre web.xml :
```
<context-param>
    <param-name>primefaces.FONT_AWESOME</param-name>
    <param-value>true</param-value>
</context-param>
```
Vous pouvez ensuite appliquer Font Awesome icônes de cette façon :
```
<p:submenu label="Time"  icon="fa fa-clock-o">
```
Références :
- Primefaces Police Impressionnant
Depuis votre réponse est un PrimeFaces spécifique et cette question n'est pas de PrimeFaces liées, stackoverflow.com/questions/28637732/... aurait été une meilleure orientation. À mon avis c'est bizarre PF doublons tout le travail qui est déjà fait dans webjar

OriginalL'auteur Jalal Sordo
0

j'ai changé le chemin d'accès de l'oet,ttf,svg,woff fichiers "font-awesome.min.css" fichier comme ceci :
```
http://localhost:8080/Students_manager/javax.faces.resource/fontawesome-webfont.svg.xhtml?ln=font-awesome/fonts&v=4.2.0#fontawesomeregular
```
ça fonctionne pour moi mais je me suis toujours à la recherche d'une autre solution parce que je devrait avoir une trajectoire dynamique non statique comme "http://localhost:8080/Students_manager/..."

OriginalL'auteur AHméd Net

J'ai changé le chemin d'accès dans "font-awesome.css" et fonctionnent 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;

}

Chemin d'accès est dépendante de FacesServlet de cartographie et de cette "solution" ne peut donc pas s'appliquer à tous.
Mieux encore, utiliser la fontawesome version de webjar. Il contient tout cela. De façon plus simple à maintenir

OriginalL'auteur Andrei Lepsch

0

Même réponse que BalusC avec quelques modifications. Note: je suis l'intégration de Metronic Thème.
```
*/@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}
```
en va de même pour simple-line-icons.min.css

et comme BalusC dit ajouter modifier web.xml en ajoutant les lignes de sa réponse.

Utiliser le webjar fontawesome pot, pas besoin de tous ces changements complexes. Et d'indiquer quels changements y sont. Nous ne devrions pas avoir à faire un manuel de comparer les!
non, vous ne pouvez pas utiliser le pot, dans ma réponse, j'ai parlé de l'intégration html, ce thème (comme metronic) dans une application JSF. + tous ceux qui ont lu cette question, il va lire la accepté de répondre, donc pas besoin pour moi de copier coller de cette réponse, et les modifications que j'ai apportées sont assez claires.

OriginalL'auteur usertest

Vous devez vous connecter pour publier un commentaire.

Voir aussi: