Usare Font Awesome in Primefaces

Mattepuffo's logo
Usare Font Awesome in Primefaces

Usare Font Awesome in Primefaces

PrimeFaces è praticamente costruito su jQuery UI, e quindi può usare le sue icone standard.

Ma se vi piacciono di più quelle di Font Awesome, come a me, potete usare quelle attivandole.

Aprite il vostro file web.xml e aggiungete queste righe dentro ai context-param:

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

Quindi diventa una cosa del genere:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee 
         http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Development</param-value>
        
        <param-name>primefaces.FONT_AWESOME</param-name>
        <param-value>true</param-value>
    </context-param>
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>faces/index.xhtml</welcome-file>
    </welcome-file-list>
</web-app>

A questo punto vi basta impostare le icone dentro alle pagine; ad esempio:

<p:submenu label="Contatti" icon="fa fa-address-book">
   ........
</p:submenu>

Avviate il progetto per verificare che tutto sia ok.

Enjoy!


Condividi

Commentami!