I've found an issue rendering Font Awesome icons and Modena Material Font Icons in a PrimeFaces data table, whereby a small rectangle is rendered instead of the expected icon. If I use a jQuery UI icon it is rendered correctly.
I've used the following XHTML code to demonstrate the issue.
Code: Select all
<p:dataTable id="languages"
value="#{languageBacking.languageList}" var="language">
<p:column id="languageCode">
<f:facet name="header">Language Code</f:facet>
<h:outputText value="#{language.languageCode}" />
</p:column>
<p:column id="rootLanguageName">
<f:facet name="header">Root Language Name</f:facet>
<h:outputText value="#{language.rootLanguageName}" />
</p:column>
<p:column id="nativeLanguageName">
<f:facet name="header">Native Language Name</f:facet>
<h:outputText value="#{language.nativeLanguageName}" />
</p:column>
<p:column style="width:5%">
<p:commandLink styleClass="icon-mode_edit" style="display: inline-block"/>
<p:spacer width="5" />
<p:commandLink styleClass="fa fa-pencil" style="display: inline-block"/>
<p:spacer width="5" />
<p:commandLink styleClass="ui-icon ui-icon-pencil" style="display: inline-block"/>
</p:column>
</p:dataTable>
Could you please let me know how this issue can be resolved.
Kind Regards
Paul