FontAwesome with PrimeFaces

Question

I was longing for the inclusion of FontAwesome icons inside Primefaces, and finally Optimus posted yesterday this great new. --> http://blog.primefaces.org/?p=3004#comment-5422

Integrated by Max Dicson We now should be able to use them.

However following at the tutorial video I'm not able to work it out.

• Using PF4.0 but JSF 2.1 (the only diff from the video)
• Added the last maven-FontAwesome.jar --> http://mvnrepository.com/artifact/org.webjars/font-awesome/4.0.3

• Added the mime-types in the web.xml file

• Calling the relevant css file with <h:outputStylesheet name="webjars/font-awesome/4.0.3/css/font-awesome.css">

But not being able to get my desired fa-bug.

Any idea? Thanks!

Answer 1

The ^ can be removed with

.ui-icon.fa {
     text-indent:0px;
     background-image:none;
}

Answer 2

it seems this has already been closed, however just in case someone runs into this issues of "^" instead of the desired icons. Not just wants to hid the "^", but rather have the actual images showing, as this what I understood the initial issue was.

When something like this comes up [1]: http://i.stack.imgur.com/5GpHZ.jpg

Using latest PrimeFaces JAR which supports FontAwesome out of the box, making sure the bellow is correct, might help

1. In your web.xml add:

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

2. In your *.xhtml where you would like to add FontAwesome icons, in between head tags point to the font-awesome css of the JAR that you have:

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

3. Finally reference icons correctly e.g.

   <p:button outcome="add-user-form" value="Add User" icon="fa fa-user-plus">
        <f:param name="productId" value="10" />
   </p:button>
   

This helped me.

Cheers

Answer 3

For the ^ problem, you could add following CSS-Style:

.ui-icon.fa {
    text-indent:0px
}

This overrides the primefaces .ui-icon style {text-indent:-99999px}.....

In my case, then the icon looked broken. I had an 404 error in the firebug console (NetworkError for woff or ttf). For me the following link was the solution: Prevent suffix from being added to resources when page loads

Answer 4

http://www.primefaces.org/showcase/ui/misc/fa.xhtml check the official demo, and you can find the document saying you should add some , so follow the instruction.