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

primefaces font awesome

Question

Intento integrar Font Awesome en JSF.

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

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

Esperaba que se vean a continuación:

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

Answer 1

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

funciona 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/..."

Answer 2

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;

}

Answer 3

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

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

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

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

<p:submenu label="Time"  icon="fa fa-clock-o">

Referencias

• Primefaces Font Awesome

Answer 4

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.

Answer 5

El archivo Font Awesome CSS está haciendo referencia de manera predeterminada a esos archivos de fuentes 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 <h:outputStylesheet> 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:

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

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 fuentes 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 fuentes 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 debe actuar en consecuencia agregando las siguientes asignaciones de mimo a 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 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 :

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

Ver también:

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