¿Cómo usar bibliotecas CSS de terceros como Font Awesome con JSF? El navegador no puede encontrar los archivos de fuentes a los que se hace referencia en el archivo CSS

Luego de de esta larga selección de datos hemos podido solucionar este dilema que tienen ciertos los lectores. Te regalamos la solución y nuestro objetivo es que te sea de mucha apoyo.

Solución:

El archivo CSS Font Awesome hace referencia de forma predeterminada a esos archivos de fuentes a través de una ruta relativa ../ como abajo:

@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 library attribute. Además, el JSF utilizará un especial /javax.faces.resource/* prefix patrón para esos recursos para que específicamente se invoque el manejador de recursos JSF, lo que permite la libertad de personalización. Los detalles se pueden encontrar en ¿Para qué es la biblioteca de recursos JSF y cómo se debe usar?

Proporcionó una estructura de carpetas como la siguiente,

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 CSS de Font Awesome se incluye a continuación:

Luego, debe editar el archivo CSS como se muestra a continuación para usar #resource mapeo en EL para hacer referencia a los archivos de fuentes en /resources carpeta con la biblioteca y el nombre del recurso apropiados (y como el nombre de la biblioteca termina como una consulta string parámetro ya, también necesita 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 controlador de recursos JSF lee el archivo CSS y luego lo recuerda en toda la aplicación.

En caso de que vea advertencias JSF1091 en los registros del servidor para esos archivos de fuentes como se muestra a continuación:

ADVERTENCIA: JSF1091: no se pudo encontrar ningún tipo de mime para el archivo [some font file]. Para resolver esto, agregue una asignación de tipo mime a las aplicaciones web.xml.

Entonces debe actuar en consecuencia agregando las asignaciones de mimo a continuación para 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 utiliza la biblioteca de utilidades JSF OmniFaces, una alternativa a la edición del archivo CSS con la #resource mapeo, es instalar OmniFaces UnmappedResourceHandler y reconfigurar el FacesServlet mapeo según su documentación. Solo necesita asegurarse de no hacer referencia al archivo CSS de fuente a través de library nunca más:

Ver también:

• Cómo usar Font Awesome de webjars.org con JSF

también primefaces>5.11 posee Font Awesome fuera de la caja

Solo agrega esto context-param para usted web.xml :

    primefaces.FONT_AWESOME
    true

Entonces puedes aplicar Font Awesome iconos de esta manera:

Referencias:

• Primefaces Font Awesome

valoraciones y reseñas

---

---

Utiliza Nuestro Buscador