Font Awesome icon placement incorrect

[JohnJ]

I have integrated the Font Awesome icons and am using them in a "p:tabMenu" in the following way in a facelet:

Code: Select all

<p:tabMenu>
   ...
   <p:menuitem value="Plots" iconPos="top" icon="fa fa-bar-chart-o" actionListener="#{MyBean.viewTabPlots}"/>
   ...
</p:tabMenu>

The icon is showing up but is not contained in the shaded circle on the tab (see below). Instead the icon just shows up in front of the tab text and the shaded circle is blank.



I can use other non-font awesome icons and they show up as expected.

For testing I am using Safari to hit the mobile web site and having it send a user agent of "Safari iOS 7 - iPhone". I am not sure if that information is relevant.

Is this a known issue? We are using PrimeFaces 5.2

[kukeltje]

2 out of 3 seems to be right, what is the difference in the third one?