I'm using fontawesome 5.x in my angular 8+ app, and the system to import the icons is very very awfull to me. This is how I do: (like documentation say https://github.com/FortAwesome/angular-fontawesome)
import { Component, OnInit } from '@angular/core';
import {faHome,faSearch,faArchive,faFileSignature,
faAddressBook,faUserMd,faDesktop} from '@fortawesome/free-solid-svg-icons/'
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {
faHome = faHome;
faSearch = faSearch;
faArchive = faArchive;
faFileSignature = faFileSignature;
faAddressBook = faAddressBook;
faUserMd = faUserMd;
faDesktop = faDesktop;
constructor() { }
ngOnInit() {
}
}
This can be okay if you have < 10 icons, but if you have +10 I think this is awfull. Is there another better way to import this?
I was searching the css file of fontawesome to "import it" at scripts of angular.json
like I do with bootstrap popper.js and jquery but didnt found it in node_modules.
So, is there another another way to do this more "clean"? (not CDN way)
Okay I was importing the fontawesome library for desktop apps, no for web apps. With web apps package I'm okay doing like I do.
Thank you all.
How I import fontAwesome icons in Angular8+
1º Step npm install --save-dev @fortawesome/fontawesome-free
2º Step in angular.json
paste the route to css and js of @fortawesome:
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/@fortawesome/fontawesome-free/css/all.min.css" // this
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/@fortawesome/fontawesome-free/js/all.min.js" //this
]
This was what I wanted. With this you only need to paste the icon (for example: <i class="fas fa-home"></i>
) in html.
The other way I post was for desktop apps I think.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With