¿Cómo usar el archivo CSS Font Awesome 4.x con JSF? El navegador no puede encontrar archivos de fonts

Intento integrar Font Awesome en JSF.

 

Pero el navegador no puede encontrar los archivos de fonts. Aparecen como cuadrados vacíos:

enter image description here

Esperaba que se vean a continuación:

enter image description here

¿Cómo es esto causado y cómo puedo resolverlo?

El archivo Font Awesome CSS está haciendo referencia de manera predeterminada a esos archivos de fonts a través de una ruta relativa ../ como a continuación:

 @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; } 

Esto fallará si se solicita el archivo CSS en una ruta diferente. El JSF lo hará si especifica el atributo de la library . Además, el JSF usará un patrón de prefijo /javax.faces.resource/* especial para esos recursos, de modo que se invocará específicamente el manejador de recursos JSF que permite la libertad de personalización. Se pueden encontrar detalles en ¿Para qué sirve la biblioteca de recursos JSF y cómo se debe usar?

Proporcionó una estructura de carpetas como a continuación,

 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 : 

Y el Font Awesome CSS se incluye de la siguiente manera:

  

Luego debe editar el archivo CSS como se indica a continuación para usar #{resource} mapeo #{resource} en EL para hacer referencia a los archivos de fonts en /resources carpeta /resources con la biblioteca y el nombre de recurso apropiados (y como nombre de biblioteca ya termina como un parámetro de cadena de consulta, también es necesario reemplazar ? por & , esto no es necesario si no usa un nombre de biblioteca).

 @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; } 

Asegúrese de reiniciar el servidor después de editar el archivo CSS. La presencia de expresiones EL en un determinado archivo CSS se detecta solo una vez durante la primera vez que el manejador de recursos JSF lee el archivo CSS y luego se recuerda en toda la aplicación.

En caso de que esté viendo advertencias JSF1091 en los registros del servidor para los archivos de fonts como a continuación:

ADVERTENCIA: JSF1091: No se pudo encontrar ningún tipo de mimo para el archivo [algún archivo de fuente]. Para resolver esto, agregue una asignación tipo mimo a las aplicaciones web.xml.

Luego debes actuar en consecuencia agregando las siguientes asignaciones de mimo a web.xml :

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

Si usa la biblioteca de utilidades JSF OmniFaces , una alternativa para editar el archivo CSS con la asignación #{resource} , es instalar OmniFaces UnmappedResourceHandler y reconfigurar la asignación de FacesServlet según su documentación. Solo necesita asegurarse de que ya no hace referencia al archivo CSS de la fuente a través de la library :

  

Ver también:

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

También primefaces>5.11 tiene Font Awesome fuera de la caja

Simplemente agregue este context-param a su web.xml :

  primefaces.FONT_AWESOME true  

A continuación, puede aplicar icons Font Awesome esta manera:

  

Referencias

  • Primefaces Font Awesome

Cambié la ruta de los archivos oet, ttf, svg, woff en el archivo “font-awesome.min.css” como este:

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

está funcionando bien para mí, pero sigo buscando otra solución porque debería tener una ruta dinámica no estática como "http://localhost:8080/Students_manager/..."

Cambié el camino en “font-awesome.css” y funciono 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; 

}

La misma respuesta que BalusC con algunos cambios. Nota: estoy integrando 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} 

lo mismo ocurre con simple-line-icons.min.css

y como BalusC dijo, agrega change web.xml agregando las líneas en su respuesta.

enter image description here