Font Awesome

Ya estan incluidas de Primefaces 5.1.1. Solo tenemos que editar el fichero web.xml y añadir:

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

Font Awesome es un pack de iconos vectoriales, css y tipos de fuente, que amplían el repertorio de iconos proporcionado por defecto por Primefaces.

Estos iconos son fácilmente escalables y se pueden integrar en nuestro proyecto sin necesidad de grandes cambios en la estructura del mismo. A continuación describiremos cómo instalar este pack de iconos.

El primer paso para instalar las nuevas fuentes, es descargar la librería correspondiente. En nuestro caso basta con añadir una dependencia Maven nueva a nuestro proyecto dentro del fichero pom.xml del módulo web.

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

Nota: El número de versión de la librería ha de especificarse explícitamente en el pom.xml ya que en el siguiente deberemos importarla en nuestra plantilla web.

Una vez indicada la dependencia y actualizado el proyecto por Maven deberemos configurar la librería en el proyecto.

El primer paso es incluir la fuente en el fichero web.xml, para ello deberemos incluir el siguiente código

        <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>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>

Una vez modificado el fichero web.xml abrimos la plantilla de nuestras páginas web template.xhtml que es la que define la estructura general de todas las pantallas. En este fichero deberemos importar la nueva librería

<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title><h:outputText value="#{messages['application.title']}"/></title>
    <link rel="shortcut icon" href="#{request.contextPath}/favicon.ico"/>
    <h:outputStylesheet library="css" name="theme.css"/>
    <!-- Añadimos libreria font awesome -->
    <h:outputStylesheet name="webjars/font-awesome/4.1.0/css/font-awesome-jsf.css"/>
    <!--     Fin añadir libreria        -->
    <h:outputScript library="js" name="fundeweb.js"/>
    <ui:insert name="head"/>
</h:head>

Nota: Es importante destacar, que en la ruta del css a añadir escogemos la opción que termina con “-jsf”, ya que es el css especialmente preparado para la estructura de recursos que jsf 2.x propone.

Tras realizar este paso las fuentes están incluidas dentro de nuestro proyecto, pero aún nos queda una tarea más a realizar. Debido a un pequeño bug los iconos no se muestran correctamente, en su lugar aparece el carácter “^”.

Para evitar que esto ocurra, abrimos nuestro fichero css propio, por defecto theme.css, y añadimos el siguiente código

.ui-icon.fa {
     text-indent:0px;
     background-image:none;
     margin-top: -5px !important;
}

Una vez realizado esto ya podemos utilizar los nuevos iconos en nuestro proyecto. Un ejemplo:

<p:commandButton value="#{messages['value.reset']}" icon="fa fa-bug" ></p:commandButton>

Nota: Es importante tener en cuenta que debemos incluir siempre la clase fa a parte de la clase que describe el icono a utilizar.