css - bootstrap - webjars spring boot

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

Question

Estoy tratando de usar iconos de Font Awesome con mi aplicación JSF. He tenido cierto éxito al seguir las instrucciones de inicio y agregar lo siguiente a la sección <h:head> mi vista:

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

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

Sin embargo, no quiero depender del servidor de arranque para proporcionar los recursos de Font Awesome, por lo que estoy tratando de agruparlos con mi guerra y configurar mis vistas para usar los recursos empaquetados.

Estoy usando el JAR pre- creado creado por el proyecto de webjars . Mi pom tiene la siguiente dependencia:

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

Esto coloca el JAR en el directorio WEB-INF / lib de mi WAR. Las partes relevantes de la estructura del 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 iconos en mi proyecto:

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

Sin embargo, esto hace que el ícono de inicio que funciona anteriormente como:

Y mi navegador (Chrome) muestra los siguientes errores en la consola (dominio / puerto / raíz de contexto modificada 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)

Así que parece que aunque el archivo css se resuelve correctamente, no se pueden encontrar los archivos que contienen las fuentes a las que se refiere el archivo css. He comprobado 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.

Answer 1

Además de la respuesta de BalusC, es una buena idea agregar los siguientes mime-mapping al 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>

Answer 2

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

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

De acuerdo a este link

Answer 3

La asignación de JSF y el nombre de la biblioteca faltan en esas URL. Si ha asignado su FacesServlet en *.xhtml , entonces esas URL 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

Esencialmente, debe utilizar #{resource} en el archivo CSS para imprimir la URL del recurso JSF adecuado:

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 manera de administrar el manejo de recursos por sí mismo. La biblioteca de utilidades JSF OmniFaces proporciona el UnmappedResourceHandler fuera de la caja para el propósito exacto. Con los siguientes pasos tu problema debe ser resuelto:

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

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

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

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

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

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

4. Mueva el nombre de la biblioteca <h:outputStylesheet> nombre del recurso.

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

5. Lucro.

Answer 4

La respuesta anterior es un poco obsoleta. Desde hace algunos lanzamientos, la versión webjar de font-awesome incluye una versión jsf-ified específica de css, por lo que no hay nada que configurar. Añade el tarro a tu proyecto, ya sea a través de maven

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

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

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

Tenga en cuenta el -jsf en el nombre !!! De esta manera, siempre puede tener la última versión en su aplicación y no depende de PF para lanzar algo nuevo.

Answer 5

Para primefaces 6.2 también me funcionó bien.

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

y en el archivo xhtml:

<h:outputScript library="webjars" name="font-awesome/5.5.0/js/all.js"/>

tenga en cuenta que debe cambiar el uso de 4 a 5, por ejemplo fa fa-plus a fas fa-plus , según la página web - https://fontawesome.com/icons/plus?style=solid