Angular Projelerine Font Awesome Ekleme

Font Awesome içinde her ihtiyacı karşılyacak şekilde iconlar bulunduran ve uygulamanızın görselliğini güzelleştiren bir kütüphanedir.

Öncelikle Angular projesine aşağıdaki üç kütüphaneyi yükleyelim.

npm install @fortawesome/fontawesome-svg-core

npm install @fortawesome/free-solid-svg-icons

npm install @fortawesome/angular-fontawesome

Daha sonra app.module.ts içerisinde Fontawesome modülünü ekliyoruz.

import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';

imoprt kısmına da 

imports: [

BrowserModule,

...

RouterModule,

FontAwesomeModule

]

Daha sonra fontu hangi component içinde kullanmak istiyorsak orada eklemeler yapacağız. Örneğin app.component içinde eklemeler yapalım. Örnek için fa-times ve fa-list iconlarını projeye ekliyorum. Kullanmak istediğiniz fontları bu şekilde ekliyoruz.

import {library} from '@fortawesome/fontawesome-svg-core';

import {faTimes, faList} from '@fortawesome/free-solid-svg-icons';

library.add(faTimes, faList);

Daha sonra kullanmak istediğimiz html içinde aşağıdaki şekilde sontları çağırıyoruz.

<fa-icon icon="times"></fa-icon>