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...") |
PeterHarding (talk | contribs) |
||
| Line 4: | Line 4: | ||
From - https://github.com/primefaces/primeng/issues/5098 | 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. | 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): | Add following rules to your css file (don't forget to first add FA 5 support to your application): | ||
<pre> | |||
/* font awesome 5 */ | /* font awesome 5 */ | ||
.fa.fab, .fa.fal, .fa.far, .fa.fas { | .fa.fab, .fa.fal, .fa.far, .fa.fas { | ||
-moz-osx-font-smoothing: grayscale; | -moz-osx-font-smoothing: grayscale; | ||
| Line 18: | Line 19: | ||
line-height: 1; | line-height: 1; | ||
} | } | ||
.fa.fas { | .fa.fas { | ||
font-family: Font Awesome\ 5 Free; | font-family: Font Awesome\ 5 Free; | ||
font-weight: 900; | font-weight: 900; | ||
} | } | ||
.fa.far { | .fa.far { | ||
font-family: Font Awesome\ 5 Free; | font-family: Font Awesome\ 5 Free; | ||
font-weight: 400; | font-weight: 400; | ||
} | } | ||
</pre> | |||
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. | 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. | ||
<pre> | |||
ex. <p-confirmDialog icon="fas fa-question-circle"></p-confirmDialog> | ex. <p-confirmDialog icon="fas fa-question-circle"></p-confirmDialog> | ||
</pre> | </pre> | ||
Revision as of 12: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>