Page 1 of 1

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

Posted: 08 Sep 2015, 23:25
by 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:
Image

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

Kind Regards

Paul

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

Posted: 09 Sep 2015, 12:43
by aragorn
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>

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

Posted: 09 Sep 2015, 20:54
by 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

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

Posted: 15 Sep 2015, 09:56
by aragorn
Glad to hear, thanks;)
pholding wrote: 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.