업데이트 2020 년 2 월 :
fortawesome 패키지는 이제 지원 ng add하지만 각도 9에서만 사용할 수 있습니다 .

ng add @fortawesome/angular-fontawesome

2019 년 10 월 8 일 업데이트 :

새 패키지를 사용할 수 있습니다 https://www.npmjs.com/package/@fortawesome/angular-fontawesome

npm install @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

FontAwesomeModule가져 오기에 추가 src/app/app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
  imports: [
    BrowserModule,
    FontAwesomeModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

아이콘을 구성 요소의 속성에 연결하십시오 src/app/app.component.ts.

import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  faCoffee = faCoffee;
}

템플릿에서 아이콘을 사용하십시오 src/app/app.component.html.

<fa-icon [icon]="faCoffee"></fa-icon>

원래 답변 :

옵션 1:

angular-font-awesome npm 모듈을 사용할 수 있습니다

npm install --save font-awesome angular-font-awesome

모듈을 가져옵니다.

...
//
import { AngularFontAwesomeModule } from 'angular-font-awesome';
@NgModule({
  //...
  imports: [
    //...
    AngularFontAwesomeModule
  ],
  //...
})
export class AppModule { }

Angular CLI를 사용하는 경우 angular-cli.json 내부의 스타일에 글꼴이 멋진 CSS를 추가하십시오.

"styles": [
    "styles.css",
    "../node_modules/font-awesome/css/font-awesome.css"
],

참고 : SCSS 전처리기를 사용하는 경우 scss의 CSS를 변경하십시오.

사용 예 :

<fa name="cog" animation="spin"></fa>

옵토 인 2 :

가 공식 이야기그것에 가 있습니다

멋진 글꼴 라이브러리를 설치하고 종속성을 추가하십시오. package.json

npm install --save font-awesome

CSS 사용

앱에 Font Awesome CSS 아이콘을 추가하려면 …

// in .angular-cli.json

"styles": [
  "styles.css",
  "../node_modules/font-awesome/css/font-awesome.css"
]

SASS 사용

빈 파일 만들기 _variables.scss에을src/ .

다음에 추가하십시오 _variables.scss:

$fa-font-path : '../node_modules/font-awesome/fonts';
다음을 styles.scss추가하십시오.

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';

테스트

ng serve를 실행하여 개발 모드에서 애플리케이션을 실행하고 http : // localhost : 4200으로 이동 하십시오. .

Font Awesome이 올바르게 설정되었는지 확인하려면 src/app/app.component.html다음으로 변경 하십시오.

<h1>
  {{title}} <i class="fa fa-check"></i>
</h1>

이 파일을 저장 한 후 브라우저로 돌아가서 앱 제목 옆에 Font Awesome 아이콘이 표시됩니다.

또한 관련 질문이 있습니다. Angular CLI 는 기본적으로 angular cli가 글꼴을 루트 로 출력하는 것처럼 dist root 를 글꼴로 멋진 글꼴 파일 로 출력합니다 dist. 전혀 문제가되지 않습니다.

답변

npm install font-awesome --save

@import '../node_modules/font-awesome/css/font-awesome.css';

npm install --save-dev @fortawesome/fontawesome-free

$fa-font-path: "../node_modules/@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/v4-shims";