Font Awesome Pro not working with PrimeFaces

[kchristensen]

Hi,

Disclaimer: I'm new to PrimeFaces

I have just bought and downloaded the Font Awesome Pro 5.5.0 and I can't use it with the PrimeFaces components.

I have tested it with

Code: Select all

<p:commandButton value="Edit" icon="fas fa-edit" type="button"/>

and it's not working.

It works fine, if I use

Code: Select all

<i class="fas fa-edit"/>

It looks like it don't like the ui-icon CSS which is rendered in the CommandButtonRenderer:

Code: Select all

text = button.getIconPos().equals("left") ? "ui-button-icon-left ui-icon ui-c" : "ui-button-icon-right ui-icon ui-c";

Any help is appreciated

/Kenneth

[tandraschko]

https://github.com/primefaces/primefaces/issues/3056
https://github.com/primefaces/primefaces/pull/3059

the PR contains style changes of core.css, maybe you can copy them to your application and check if it works.

[kchristensen]

Thank you for the answer

But it's not working (nor with the new core.css).

I have tried with the new core.css using PF 6.2 & PF 6.2.10.

Tried with:

Code: Select all

<p:commandButton type="button" value="Edit" icon="fa fal fa-stroopwafel"/>

Generated HTML:

Code: Select all

<button id="j_idt52" name="j_idt52"
                    class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left" type="button"><span
                    class="ui-button-icon-left ui-icon ui-c fa fal fa-stroopwafel"></span><span
                    class="ui-button-text ui-c">Edit</span></button>
            <script id="j_idt52_s"
                    type="text/javascript">PrimeFaces.cw("CommandButton", "widget_j_idt52", {id: "j_idt52"});</script>

And with:

Code: Select all

<p:commandButton type="button" value="Edit" icon="fal fa-stroopwafel"/>

Generated HTML:

Code: Select all

<button id="j_idt53" name="j_idt53"
                    class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left" type="button"><span
                    class="ui-button-icon-left ui-icon ui-c fal fa-stroopwafel"></span><span
                    class="ui-button-text ui-c">Edit</span></button>
            <script id="j_idt53_s"
                    type="text/javascript">PrimeFaces.cw("CommandButton", "widget_j_idt53", {id: "j_idt53"});</script>

The icon is shown when I remove ui-icon and fa.

[tandraschko]

PF is still on 4.x, so no idea

You can wait until we upgraded or try to check the wrong behavior by yourself.

[kchristensen]

I found the problem and have a solution to the problem

I'm using the Serenity theme and the problem is the "body .ui_icon" in the theme.css:

Code: Select all

body .ui-icon {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  text-indent: 0;
  overflow: visible;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga'; }

I need to override the "font-family: 'Material Icons'" to fix the problem.

Custom CSS:

Code: Select all

.fa-pro-fab {
    font-family: 'Font Awesome 5 Brands' !important;
    font-weight: 400 !important;
}

.fa-pro-fal {
    font-family: 'Font Awesome 5 Pro' !important;
    font-weight: 300 !important;
}

.fa-pro-far {
    font-family: 'Font Awesome 5 Pro' !important;
    font-weight: 400 !important;
}

.fa-pro-fas {
    font-family: 'Font Awesome 5 Pro' !important;
    font-weight: 900 !important;
}

And now it's working with:

Code: Select all

<p:commandButton type="button" value="Test1" icon="fa-pro-fas fas fa-stroopwafel"/>
<p:commandButton type="button" value="Test2" icon="fa-pro-far far fa-stroopwafel"/>
<p:commandButton type="button" value="Test3" icon="fa-pro-fal fal fa-stroopwafel"/>
<p:commandButton type="button" value="Test4" icon="fa-pro-fab fab fa-font-awesome"/>