Font Awesome and Modena Icons aren't rendered in p:dataTable

[pholding]

Hi

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>

This is rendered as follows:


Could you please let me know how this issue can be resolved.

Kind Regards

Paul

[mert.sincan]

I think you can try with;

Code: Select all

<style type="text/css">

[class^="icon-"], [class*=" icon-"] {
    font-family: 'Modena' !important;
}

.ui-state-hover a.ui-commandlink, 
.ui-state-hover a.ui-commandlink:hover,
.ui-state-hover a.ui-commandlink:link, 
.ui-state-hover a.ui-commandlink:visited, 
.ui-state-focus a.ui-commandlink, 
.ui-state-focus a.ui-commandlink:hover, 
.ui-state-focus a.ui-commandlink:link, 
.ui-state-focus a.ui-commandlink:visited {
    color: #FFFFFF !important;
}

.ui-commandlink.fa {
    font-family: FontAwesome !important;
}

.ui-widget-content.ui-state-highlight a.ui-commandlink {
    color: #363636 !important;
}

</style>

[pholding]

Hi Aragorn

Thanks for the reply. I've added the CSS code you suggested and the icons are now rendered correctly.

Would it be possible to include this fix in the next version of the Modena layout library?

Kind Regards

Paul

[mert.sincan]

Glad to hear, thanks;)

Would it be possible to include this fix in the next version of the Modena layout library?

We will decide after talking about this fix with other PF-team members.