Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

FontAwesome in Angular 8, best way to import?

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)

[Resolved]

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.

like image 418
Schwarz54 Avatar asked Nov 11 '19 11:11

Schwarz54


1 Answers

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.

like image 151
Schwarz54 Avatar answered Oct 10 '22 18:10

Schwarz54