Modena font icons not rendered correctly in commandbutton

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

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>
Image

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

User avatar
aragorn
Posts: 3641
Joined: 29 Jun 2013, 12:38

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>

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

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

User avatar
aragorn
Posts: 3641
Joined: 29 Jun 2013, 12:38

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)

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

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

User avatar
aragorn
Posts: 3641
Joined: 29 Jun 2013, 12:38

02 Sep 2015, 09:01

Glad to hear, thanks ;) We are planning to add this fix for next release.

Locked

Return to “Modena”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests