Prime Community Forum

Posted: **30 Aug 2015, 13:42**

Hi

I am trying to adapt the data grid example provided with the Modena layout for my project and instead of displaying a Font Awesome icon in the command button, I would like to use a Modena material font icon instead. The problem I've got is that the icon is always rendered as a small green "^" symbol.

In the "modena-layout-1.0.1\tag\src\main\webapp\data.xhtml" file I have edit the code as follows:

Code: Select all

<p:commandButton icon="icon-check Fs15" update=":form1:carDetail" oncomplete="PF('carDialog').show()" styleClass="BlueTextButton RaisedButton">
    <f:setPropertyActionListener value="#{car}" target="#{dataGridView.selectedCar}" />
</p:commandButton>

The browser I'm using is Version 44.0.2403.155.

Is there anything that I can do to allow the Modena font icons to be used in this scenario or is it a bug with the layout?

Kind Regards

Paul

Posted: **30 Aug 2015, 20:05**

Please use Modena Font Icons. Modena supports Google Material Font Icon and FontAwesome; http://www.primefaces.org/modena/font-icons.xhtml

I think you can try with "fa fa-check";

Code: Select all

<p:commandButton icon="fa fa-check Fs15" update=":form1:carDetail" oncomplete="PF('carDialog').show()" styleClass="BlueTextButton RaisedButton">
    <f:setPropertyActionListener value="#{car}" target="#{dataGridView.selectedCar}" />
</p:commandButton>

Posted: **30 Aug 2015, 21:21**

Hi Aragorn

Thanks for the quick reply. The issue I've got seems to affect all of the Modena Material Font Icons listed on http://www.primefaces.org/modena/font-icons.xhtml and I just picked "icon-check" at random for the purposes of demonstrating the issue. There are some icons in the Modena Material Font Icons library which look cleaner than in the Font Awesom library, and so I would prefer to use them for the command button in the data grid.

Is there anything I can do so that the Modena Material Font Icons will be rendered correctly?

Kind Regards

Paul

Posted: **30 Aug 2015, 22:54**

Can you please try with this css code?

Code: Select all

[class^="icon-"], [class*=" icon-"] {
    background-image: none !important;
    text-indent: 0px;
}

(You can add this code in modena-font.css)

Posted: **31 Aug 2015, 01:02**

Hi Aragorn

I've added the css and the icons are now rendered correctly.

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

Thanks for your help.

Kind Regards

Paul

Posted: **02 Sep 2015, 09:01**

Glad to hear, thanks

We are planning to add this fix for next release.

Prime Community Forum

Modena font icons not rendered correctly in commandbutton

Modena font icons not rendered correctly in commandbutton

Re: Modena font icons not rendered correctly in commandbutto

Re: Modena font icons not rendered correctly in commandbutto

Re: Modena font icons not rendered correctly in commandbutto

Re: Modena font icons not rendered correctly in commandbutto

Re: Modena font icons not rendered correctly in commandbutto