Difference between revisions of "Using PrimeNG and FontAwesome"
Jump to navigation
Jump to search
PeterHarding (talk | contribs) (Created page with " =Notes= From - https://github.com/primefaces/primeng/issues/5098 <pre> For those wanting to combine FA 4 and 5 icons on older versions of PrimeNG, there's a very simple tri...") |
(No difference)
|
Revision as of 13:41, 21 October 2019
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>