Barcelona with FontAwesome 5

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
mattmatt
Posts: 2
Joined: 19 Nov 2019, 22:46

19 Nov 2019, 22:59

Regards,

Is there a functional way to get Barcelona working with FA5? I've tried this solution by Melloware but

Code: Select all

<p:menuitem  value="Test" url="/test/test.jsf" icon="far fa-square" />
gives me an empty icon. However, FA4 still works fine:

Code: Select all

<p:menuitem  value="Test2" url="/test/test2.jsf" icon="fa fa-briefcase" />
I included this snippet on the JSF pages, to no avail:

Code: Select all

<h:head>
        <h:outputStylesheet library="webjars" name="font-awesome/5.11.2/css/all-jsf.css" />
        <h:outputStylesheet library="webjars" name="font-awesome/5.11.2/css/v4-shims-jsf.css" />
</h:head>
Thanks!

mattmatt
Posts: 2
Joined: 19 Nov 2019, 22:46

22 Nov 2019, 03:00

Got it to work, not with far/fas though; not sure whether it's the cleanest implementation.

src/main/webapp/resources/primefaces-barcelona-{theme}/theme.css

Add:

Code: Select all

.ui-icon {
  text-indent: 0;
}

.fa, .far, .fas {
  font-family: "Font Awesome 5 Free", sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* 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";
}

src/main/webapp/resources/sass/theme/_common.scss

Comment:

Code: Select all

    /*
    .fa {
        font-family: 'FontAwesome';
    }
    */
Add:

Code: Select all

    /* Custom */
    .fa {
        font-family: 'Font Awesome 5 Free', sans-serif;
    }
On your xhtml:

Code: Select all

<p:menuitem  value="Foo" url="foo.jsf" icon="fa fa-briefcase" />
<p:menuitem  value="Bar" url="bar.jsf" icon="fa fa-project-diagram" />
Might need to import the webjar too (see this).

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

20 Dec 2019, 16:12

Hi,

Thanks a lot for the updates! Good solution. Also, please see our github issue;
https://github.com/primefaces/primefaces/issues/4276

Best Regards,

Post Reply

Return to “Barcelona - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests