angular font awesome
//install in your project directory
npm install --save @fortawesome/fontawesome-free
// in angular.json add in the 'build' section the following lines in 'styles' and 'scripts'
"styles": [
"node_modules/@fortawesome/fontawesome-free/css/all.css"
]
"scripts": [
"node_modules/@fortawesome/fontawesome-free/js/all.js"
]
//from now on, you can use fontawesome icons through the <i>
<i class='fab fa-facebook'></i>
4.17
6
npm install --save font-awesome angular-font-awesome
//once installed you will to import font awesome to your app.module.ts
import { AngularFontAwesomeModule} from 'angular-font-awesome';
//on your app.module.ts add AngularFontAwesomeModule under imports
imorts[
.../
AngularFontAwesomeModule,
],
Thank you!
6
0
3.2
5
ng add @fortawesome/angular-fontawesome
Thank you!
5
0
3.86
7
//2021: INSTALL IT IN ANGULAR 1ST
npm i font-awwsome
// in angular.json add in the 'build' section the following lines in 'styles' and 'scripts'
"styles"[
"node_modules/@fortawesome/fontawesome-free/css/fontawesome.css"
]
Thank you!
7
0
4.2
6
ng add @fortawesome/angular-fontawesome@<version>
// 0.1.x angular 5.x not supported
// 0.2.x angular 6.x not supported
// 0.3.x angular 6.x && 7.x not supported
// 0.4.x, 0.5.x angular 8.x not supported
// 0.6.x angular 9.x supported
// 0.7.x angular 10.x supported
// Usage
// Typescript
import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'font awesome usage';
faCoffee = faCoffee;
}
// In html
<fa-icon [icon]="faCoffee"></fa-icon>
Thank you!
6
0
3.78
9
"apps": [
{
"root": "src",
"outDir": "dist",
....
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/font-awesome/css/font-awesome.css" // -here webpack will automatically build a link css element out of this!?
],
...
}
]
],
Thank you!
9
0
Are there any code examples left?
New code examples in category TypeScript
-
TypeScript 2022-03-27 19:30:45 typescript promise
-
TypeScript 2022-03-27 17:25:44 how to search for imports in vscode
-
TypeScript 2022-03-27 17:15:20 angular formgroup mark as touched
-
TypeScript 2022-03-27 17:05:06 use of slice and splice add elements array
-
TypeScript 2022-03-27 16:50:23 android studio loop through all objects in layout
-
TypeScript 2022-03-27 14:35:08 wergensherts meaning
-
TypeScript 2022-03-27 13:50:15 remove all the elements from a numpy array python
-
TypeScript 2022-03-27 12:35:49 redux toolkit typescript install
-
TypeScript 2022-03-27 12:35:30 laravel middleware for apis