Cómo utilizar Font Awesome desde webjars.org con JSF

Estoy tratando de usar íconos de Font Awesome con mi aplicación JSF. Tuve cierto éxito al seguir las instrucciones de inicio y agregar lo siguiente a la sección mi vista:

  

Esto me da un lindo icono de inicio cuando uso la clase icon-home :

enter image description here

Sin embargo, no quiero depender del servidor de arranque para proporcionar los recursos Font Awesome, así que estoy tratando de combinarlos con mi guerra y configurar mis vistas para usar los recursos del paquete.

Estoy usando el JAR prefabricado creado por el proyecto webjars . My pom tiene la siguiente dependencia:

  org.webjars font-awesome 3.2.1  

Esto coloca el JAR en el directorio WEB-INF / lib de mi WAR. Las partes relevantes de la estructura de JAR son:

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

He intentado lo siguiente para incluir los íconos en mi proyecto:

  

Sin embargo, esto hace que el ícono de inicio que anteriormente funcionaba sea:

enter image description here

Y mi navegador (Chrome) muestra los siguientes errores en la consola (dominio / puerto / contexto-raíz cambiado para proteger a los inocentes;):

 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) 

Por lo tanto, parece que aunque el archivo css se resuelve correctamente, no se pueden encontrar los archivos que contienen las fonts a las que hace referencia el archivo css. Revisé esas referencias en el archivo CSS y son:

 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'); 

Esos caminos son relativos al recurso css, así que pensé que JSF no debería tener problemas para encontrarlo. Ahora no estoy seguro de qué hacer.

¡Cualquier punto sería genial! Aclamaciones.

El mapeo JSF y el nombre de la biblioteca no se encuentran en esas URL. Si ha mapeado su FacesServlet en *.xhtml , entonces esas URL en realidad deberían haber sido:

 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 

Básicamente, debe usar #{resource} en el archivo CSS para imprimir la URL de recursos JSF adecuada:

 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"); 

Sin embargo, como el código fuente está realmente fuera de su control (no puede editarlo), entonces no hay otra forma de administrar el manejo de recursos usted mismo. La biblioteca de utilidades JSF OmniFaces proporciona el UnmappedResourceHandler no UnmappedResourceHandler fuera de la caja para el propósito exacto. Con los siguientes pasos su problema debe ser resuelto:

  1. Instale OmniFaces, también está disponible en Maven.

      org.omnifaces omnifaces   
  2. Registre UnmappedResourceHandler en faces-config.xml siguiente manera:

      org.omnifaces.resourcehandler.UnmappedResourceHandler  
  3. Agregue /javax.faces.resource/* a la asignación de FacesServlet , suponiendo que el nombre del servlet es facesServlet y que ya tiene una asignación en *.xhtml :

      facesServlet /javax.faces.resource/* *.xhtml  
  4. Mueva el nombre de la biblioteca nombre del recurso.

      
  5. Lucro.

La respuesta anterior está algo obsoleta. Desde hace algunos lanzamientos, la versión webjar de font-awesome incluye una versión jsf-ified específica del css por lo que no hay nada que configurar. Agregue el jar a su proyecto, ya sea vía maven

  org.webjars font-awesome 4.6.3  

o directamente y simplemente funciona. Solo asegúrate de incluir el CSS correcto

  

Tenga en cuenta el -jsf en el nombre! De esta forma siempre puede tener la última versión en su aplicación y no depender de que PF libere algo nuevo

Además de la respuesta de BalusC, es una buena idea agregar las siguientes mime-mapping s al web.xml

   eot application/vnd.ms-fontobject   otf font/opentype   ttf application/x-font-ttf   woff application/x-font-woff   woff2 application/x-font-woff2   svg image/svg+xml   ico image/x-icon  

Además de las respuestas de BalusC y Hatem Alimam , esto podría ser útil también al agregar:

  primefaces.FONT_AWESOME true  

De acuerdo con este enlace