2

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.

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

Any idea? Thanks!

Forjap
  • 51
  • 1
  • 1
  • 6
  • 1
    I couldn't get it to work either. I get a ^ where the icon is supposed to be. I did however resolve 404 errors with the stylesheet by changing his `h:outputStyleSheet` to this `` – MrRaymondLee Jan 13 '14 at 17:04
  • See http://stackoverflow.com/questions/18891768/how-to-use-font-awesome-from-webjars-org-with-jsf/28652968#28652968 for the latest simple way to make it work – Kukeltje Feb 22 '15 at 00:16

4 Answers4

4

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]: https://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

Fabian N.
  • 3,807
  • 2
  • 23
  • 46
Kirill K
  • 41
  • 1
3

The ^ can be removed with

.ui-icon.fa {
     text-indent:0px;
     background-image:none;
}
crimp
  • 46
  • 1
  • This is getting better, and it is working. Now the problems seems legit solved. But now we face a different problem (maybe not addressed by Max) and it is that the button doesn't react to a fa-2x. Theoretically it is not directly related, as developers should address the size of the button in design, but due the icons are vectorial... Nevertheless thanks for the answer I'm going to close it as answered! – Forjap Jan 15 '14 at 15:04
0

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

Community
  • 1
  • 1
crimp
  • 1
  • Great! That works. ^_^ Now I'm able to see the icon, however for Icons with empty content you still can see the ^ at the back. eg: `fa-bug` is OK; `fa-heart-o` is NOT_OK. – Forjap Jan 14 '14 at 12:50
0

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.

Yuanqi Cao
  • 101
  • 1
  • 5
  • This way you are always behind the normal fontAwesome releases. Better to use the webjar variant http://stackoverflow.com/questions/18891768/how-to-use-font-awesome-3-2-1-from-webjars-org-with-jsf#28652968 – Kukeltje Aug 01 '16 at 15:12