Using PrimeNG and FontAwesome

From PeformIQ Upgrade
Revision as of 13:43, 21 October 2019 by PeterHarding (talk | contribs)
Jump to navigation Jump to search

Using PrimeNG Icons

See - https://www.primefaces.org/showcase/ui/misc/primeicons.xhtml


Notes

From - https://github.com/primefaces/primeng/issues/5098

For those wanting to combine FA 4 and 5 icons on older versions of PrimeNG, there's a very simple trick to support both. Add following rules to your css file (don't forget to first add FA 5 support to your application):

/* font awesome 5 */

.fa.fab, .fa.fal, .fa.far, .fa.fas {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}

.fa.fas {
  font-family: Font Awesome\ 5 Free;
  font-weight: 900;
}

.fa.far {
  font-family: Font Awesome\ 5 Free;
  font-weight: 400;
}

If you want to use a FA 5 icon you only need to prefix it with 'fas ' or 'far ' anywhere PrimenNG supports setting a FA icon.

ex. <p-confirmDialog icon="fas fa-question-circle"></p-confirmDialog>