Comment utiliser Font Awesome à partir de webjars.org avec JSF

Je suis en train d'utiliser Police Impressionnant icônes avec mon application JSF. J'ai eu quelques succès en suivant les prise en main les instructions et par adjonction, à mon avis, est <h:head> section:

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"
      rel="stylesheet" />

Cela me donne une belle icône d'accueil lorsque j'utilise le icon-home classe:

Cependant, je ne veux pas être dépendante sur le bootstrap server pour fournir la Police Impressionnant de ressources, de sorte que je suis en train de regrouper ces avec ma guerre, et de configurer mon point de vue à utiliser les ressources groupés.

Je suis en utilisant le pré-faites JAR créé par le webjars projet. Mon pompon a la suite de la dépendance:

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>font-awesome</artifactId>
    <version>3.2.1</version>
</dependency>

Cela met le POT dans ma GUERRE de la WEB-INF/lib du répertoire. La corporation pièces de la JARRE de la structure sont:

META-INF
  - MANIFEST.MF
  + maven
  - resources
    - webjars
      - font-awesome
        - 3.2.1
          - css
            - font-awesome.css
            - *other css files*
          - font
            - *font files*

J'ai essayé celui-ci à inclure les icônes de mon projet:

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

Cependant, ce qui rend le travail auparavant icône accueil:

Comment utiliser Font Awesome à partir de webjars.org avec JSF

Et mon navigateur (Chrome) montre les erreurs suivantes dans la console (domaine/port/context-root changés pour protéger les innocents ;):

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) 
GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.ttf?v=3.2.1 404 (Not Found) 
GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.svg 404 (Not Found)

Donc on dirait bien que le fichier css est résolu correctement, les fichiers qui contiennent les polices de caractères que le fichier css se rapporte ne peut pas être trouvé. J'ai vérifié ces références dans le fichier css et ils sont:

src: url('../font/fontawesome-webfont.eot?v=3.2.1');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');

Ces chemins sont relatifs à la css de ressources, alors j'ai pensé JSF devriez avoir aucun problème à les trouver. Maintenant, je ne suis pas sûr de quoi faire.

Tous les pointeurs serait génial! Des acclamations.

source d'informationauteur Ryan Bennetts

Dans le cadre du programme de cartographie et de nom de la bibliothèque est manquant dans les URLs. Si vous avez mappé votre FacesServlet sur *.xhtmlces Url ont été effectivement:

GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.woff.xhtml?ln=webjars&v=3.2.1
GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.ttf.xhtml?ln=webjars&v=3.2.1
GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.svg.xhtml?ln=webjars

Essentiellement, vous devriez être en utilisant #{resource} dans le fichier CSS pour imprimer le bon JSF URL de ressource:

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

Cependant, comme le code source est en fait à l'extérieur de votre contrôle (vous ne pouvez pas la modifier), puis il n'y a pas d'autre façon de gérer les ressources de manipulation de vous-même. La JSF bibliothèque utilitaire OmniFaces fournit la UnmappedResourceHandler sorti de la boîte pour la fin exacte. Avec les étapes suivantes de votre problème devrait être résolu:

Installer OmniFaces, il est disponible sur Maven.

<dependency>
    <groupId>org.omnifaces</groupId>
    <artifactId>omnifaces</artifactId>
    <version><!-- Check omnifaces.org for current version. --></version>
</dependency>

Registre UnmappedResourceHandler dans faces-config.xml comme suit:

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

Ajouter /javax.faces.resource/* à FacesServlet cartographie, en supposant que le nom de la servlet est facesServlet et vous avez déjà une cartographie sur *.xhtml:

<servlet-mapping>
    <servlet-name>facesServlet</servlet-name>
    <url-pattern>/javax.faces.resource/*</url-pattern>
    <url-pattern>*.xhtml</url-pattern>
</servlet-mapping>

Déplacer le <h:outputStylesheet> nom de la bibliothèque dans le nom de la ressource.
```
<h:outputStylesheet name="webjars/font-awesome/3.2.1/css/font-awesome.css" />
```
Profit.

10

La réponse ci-dessus est une sorte de le rendre obsolète. Depuis quelques versions il y a, la webjar version de font-awesome a un jsf-identifiés version du css donc il n'y a rien à configurer. Ajouter le pot de votre projet, que ce soit via maven
```
<dependency>
   <groupId>org.webjars</groupId>
   <artifactId>font-awesome</artifactId>
   <version>4.6.3</version>
</dependency>
```
ou directement et il fonctionne, tout simplement. Assurez-vous d'inclure le bon css
```
<h:outputStylesheet library="webjars" name="font-awesome/4.6.3/css/font-awesome-jsf.css" />
```
Note le jsf dans le nom!!!!! De cette façon, vous pouvez toujours avoir la dernière version de votre application et ne dépendent pas de PF de relâcher quelque chose de nouveau

En plus de BalusC réponse, c'est une bonne idée d'ajouter le suivant mime-mappings à la web.xml

<!-- web fonts -->
<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>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>
<mime-mapping>
    <extension>svg</extension>
    <mime-type>image/svg+xml</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>ico</extension>
    <mime-type>image/x-icon</mime-type>
</mime-mapping>

En plus de BalusC et Hatem Alimam réponses, cela pourrait être utile aussi en ajoutant:

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

Selon cette lien

Vous devez vous connecter pour publier un commentaire.