Using PrimeNG and FontAwesome - Revision history

PeterHarding at 02:48, 21 October 2019

2019-10-21T02:48:53Z

← Older revision		Revision as of 12:48, 21 October 2019
Line 3:		Line 3:
	See - https://www.primefaces.org/showcase/ui/misc/primeicons.xhtml		See - https://www.primefaces.org/showcase/ui/misc/primeicons.xhtml

			=Setup=

			To install:

			<pre>
			npm install --save primeng
			npm install --save primeicons
			</pre>

			To have the icons show up you need to link in the CSS in Angular.json

			<pre>
			"styles": [
			"src/styles.css",
			"node_modules/font-awesome/css/font-awesome.min.css",
			"node_modules/primeng/resources/primeng.min.css",
			"node_modules/primeng/resources/themes/nova-dark/theme.css",
			"node_modules/primeicons/primeicons.css"
			],
			</pre>

	=Notes=		=Notes=

PeterHarding at 02:43, 21 October 2019

2019-10-21T02:43:38Z

← Older revision		Revision as of 12:43, 21 October 2019
Line 1:		Line 1:
			=Using PrimeNG Icons=

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


	=Notes=		=Notes=

PeterHarding at 02:41, 21 October 2019

2019-10-21T02:41:52Z

← Older revision		Revision as of 12:41, 21 October 2019
Line 4:		Line 4:
	From - https://github.com/primefaces/primeng/issues/5098		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 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>

PeterHarding: Created page with " =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 tri..."

2019-10-21T02:41:02Z

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..."

New page

=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 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>

</pre>

[[Category:PrimeNG]]
[[Category:Angular]]
[[Category:FontAwesome]]