Adicionando mais icones em sua aplicação com Primefaces

Ao trabalharmos com Primefaces  notamos o quão fácil é trabalhar com o que ele nos dispõe, dês de componentes muito completos, temas mutáveis(e muito melhores do que eu faria) e até mesmo ícones ajustáveis aos temas, nos poupando um bom tempo de caça a ícones na internet.

Porém como nem tudo são flores, o numero de ícones disponíveis é pouco, e durante o desenvolvimento de uma aplicação um pouco mais complexa, logo nos deparamos com a falta de ícones (principalmente para menus).

Sofrendo do mal supracitado, e pensado em abandonar os ícones leves e adaptáveis ao tema, acabei me deparando com um post no grupo do Primefaces no Facebook sobre como adicionar os ícones da Font Awesome, que conta com um arsenal de ícones bem maior oferecendo as vantagens dos ícones nativos do Primefaces.

O autor do post disponibilizou um vídeo de como configurar o projeto, além de um link para download do JAR e uma aplicação de exemplo.

Para simplificar eu vou resumir as configurações expostas no vídeo:

  1. Adicionar o JAR baixado na pasta WEB-INF/lib do seu projeto WEB;
  2. No 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>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>sgv</extension>
    		<mime-type>image/sgv+xml</mime-type>
    	</mime-mapping>

     

  3. Na sua pagina WEB ou no seu template:
    <h:outputStylesheet library="awesome" name="css/font-awesome.css" />
  4. Só usar, no site do  Font Awesome existem alguns exemplos, não esquecer do fa antes do nome do ícone:
    <p:commandButton value="Informar Erro" icon="fa fa-bug"/>

5 thoughts on “Adicionando mais icones em sua aplicação com Primefaces

    • Realmente os ícones não acompanham todos os temas, basicamente eles alternam entre preto ou branco dependendo do tema.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>