====== Font Awesome ======

===== Primefaces 5.1 =====

Ya estan incluidas de [[http://blog.primefaces.org/?p=3318|Primefaces 5.1.1]]. Solo tenemos que editar el fichero **//web.xml//** y añadir:

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


===== Primefaces 5.0 =====

[[http://fortawesome.github.io/Font-Awesome/|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.

===== Instalación =====

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.
<code xml>
   <dependency>
     <groupId>org.webjars</groupId>
     <artifactId>font-awesome</artifactId>
      <version>4.1.0</version>
   </dependency>
</code>

**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
<code 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>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>
</code>

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
<code xml>
<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>
</code>

**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
<code css>
.ui-icon.fa {
     text-indent:0px;
     background-image:none;
     margin-top: -5px !important;
}
</code>

Una vez realizado esto ya podemos utilizar los nuevos iconos en nuestro proyecto. Un ejemplo:
<code xml>
<p:commandButton value="#{messages['value.reset']}" icon="fa fa-bug" ></p:commandButton>
</code>

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