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

Locked
pholding
Posts: 27
Joined: 25 Feb 2014, 21:19

08 Sep 2015, 23:25

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

aragorn
Posts: 3718
Joined: 29 Jun 2013, 12:38

09 Sep 2015, 12:43

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
Posts: 27
Joined: 25 Feb 2014, 21:19

09 Sep 2015, 20:54

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

aragorn
Posts: 3718
Joined: 29 Jun 2013, 12:38

15 Sep 2015, 09:56

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.

Locked

Return to “Modena”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests