Font Awesome @ Angular

개요

Icon 폰트 라이브러리를 사용하면 웹/앱을 좀 더 분명하고, 생동감 있게 표현할 수 있습니다.

Angular 프로젝트에 Angular Material 모듈을 적용하게 되면, 기본적으로 구글의 머터리얼 아이콘 폰트를 별도의 설정 없이 사용할 수 있습니다.

Font Awesome 은 회사의 로고와 같은 머터리얼 아이콘 폰트에서 제공하지 않는 추가적인 아이콘이 필요할 경우 사용할 수 있는 Icon 폰트 라이브러리입니다.

이번 포스트에서는 Font Awesome 을 Angular 프로젝트에 설치해보도록 하고, 간단한 사용방법을 확인해보도록 하겠습니다.

설치

Font Awesome 은 공식적으로 angular-fontawesome 이라는 모듈을 제공하기 때문에 Angula1.r Project 에 적용하는 것이 어렵지 않습니다.

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

더욱 많은 Icon 스타일 추가하기

회사의 로고(Brand) 들은 기본세트(free-solid-svg-icons)에서 분리되어 있기 때문에 사용을 위해서는 별도의 모듈을 설치해야 합니다.

지원되는 무료 icon 의 검색은 fontawesome.com/icons 에서 할 수 있습니다.

아래의 명령어를 사용하여 일반적인 스타일의 icon 과 회사의 로고를 추가합니다.

$ npm install @fortawesome/free-brands-svg-icons
$ npm install @fortawesome/free-regular-svg-icons

사용

아래의 예시들은 Angular CLI 를 사용하여 Angular Project 를 생성한 것으로 가정한 상황입니다.

기본적인 사용방법

<fa-icon> 를 템플릿에 추가합니다.

▼ src/app/app.component.html

<div style="text-align:center">
  <fa-icon [icon]="faCoffee"></fa-icon>
</div>

faCoffee 멤버에 사용할 icon 을 import 하여 할당합니다.

▼ 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',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  faCoffee = faCoffee;	// ← 추가
}

마지막으로 앞서 설치한 FontAwesomeModule 을 App 모듈에 import 합니다.

▼ 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({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FontAwesomeModule	// ← 추가
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

아이콘 라이브러리 사용하기

아이콘 라이브러리는 템플릿에서 편리한 사용법을 제공하지만 컴포넌트와 별도로 아이콘을 관리해야합니다. 즉, 누군가 실수로 아이콘 라이브러리에서 아이콘을 제거하면 사용하는 컴포넌트가 손상 될 수 있습니다.

Icon 들은 app.module 에 library.add() 를 통하여 한번만 어플리케이션에 등록하면 Icon들은 프로젝트내의 FontAwesomeModule을 import 한 모듈의 모든 자식(하위) 컴포넌트에서 사용할 수 있습니다. 이러한 방식은 개별적인 컴포넌트가 icon 을 중복적으로 선언 및 정의할 필요가 없도록 도와줍니다.

▼ src/app/app.component.html

<div style="text-align:center">
  <!-- simple name only that assumes the 'fas' prefix -->
  <fa-icon icon="coffee"></fa-icon>
  <!-- ['fas', 'coffee'] is an array that indicates the [prefix, iconName] -->
  <fa-icon [icon]="['fas', 'coffee']"></fa-icon>
</div>

① { FontAwesomeModule } 을 '@fortawesome/angular-fontawesome' 에서 import 합니다.
② imports 에 FontAwesomeModule 을 추가합니다.
③ { library } 를'@fortawesome/fontawesome-svg-core'에서 import 합니다.
④ { faCoffee } 와 같은 사용할 icon 을 '@fortawesome/free-solid-svg-icons'에서 import 합니다.
⑤ import 한 icon 을 library.add(faCoffee) 와 같이 library 에 추가합니다.

▼ 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';	// ← 추가 ①
import { library } from '@fortawesome/fontawesome-svg-core';	// ← 추가 ③
import { faCoffee } from '@fortawesome/free-solid-svg-icons';	// ← 추가 ④

// Add an icon to the library for convenient access in other components
library.add(faCoffee);	// ← 추가 ⑤

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FontAwesomeModule	// ← 추가 ②
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

아래와 같이 간단히 전체 icon 스타일을 모두 import 할 수도 있습니다. 하지만 Angular 어플리케이션의 최종 번들이 사용하지 않는 icon 들로 용량이 증가할 수 있다는 사실에 주의해야 합니다.

▼ src/app/app.module.ts

import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';

library.add(fas, far);

다른 스타일의 아이콘 사용하기

브랜드 로고(brand icon) 추가하기

▼ src/app/app.module.ts

import { faTwitter } from '@fortawesome/free-brands-svg-icons';

// Add an icon to the library for convenient access in other components
library.add(faTwitter);

▼ src/app/app.module.html

<fa-icon [icon]="['fab', 'twitter']"></fa-icon>

일반 스타일에서 Icon 추가하기

▼ src/app/app.module.ts

import { faCalendar } from '@fortawesome/free-regular-svg-icons';

// Add an icon to the library for convenient access in other components
library.add(faCalendar);

▼ src/app/app.module.html

<fa-icon [icon]="['fas', 'calendar']"></fa-icon>

특징

이하 기술되는 특징들은 Font Awesome 의 기능으로 사용 가능합니다. 각 소제목별 링크에 상세한 내용이 더 있습니다.

기본(Basic)

크기:

<fa-icon [icon]="['fas', 'coffee']" size="xs"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" size="lg"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" size="6x"></fa-icon>

고정폭:

아이콘의 내부 크기에 관계 없이 폭을 일정하게 유지합니다.

<fa-icon [icon]="['fab', 'facebook']" [fixedWidth]="true"></fa-icon>
<fa-icon [icon]="['fab', 'google']" [fixedWidth]="true"></fa-icon>
<fa-icon [icon]="['fab', 'twitter']" [fixedWidth]="true"></fa-icon>

회전:

• 회전은 90º 간격으로 90º, 180º, 270º 를 옵션으로 선택할 수 있습니다. 좀 더 세밀한 회전은 아래의 고급 사용법 예시의 transform 옵션을 사용하여 조정할 수 있습니다.

<fa-icon [icon]="['fas', 'coffee']" rotate="90"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" rotate="180"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" rotate="270"></fa-icon>

대칭:

• 상/하 혹은 좌/우 혹은 두 가지 모두를 적용할 수 있습니다.

<fa-icon [icon]="['fas', 'coffee']" flip="horizontal"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" flip="vertical"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" flip="both"></fa-icon>

스핀과 펄스 에니메이션 (Spin and pulse animation):

• 로딩상태를 표시할 경우 사용할 수 있습니다.
• pulse 옵션은 8단계로 나누어서 회전을 합니다.

<fa-icon [icon]="['fas', 'spinner']" [spin]="true"></fa-icon>
<fa-icon [icon]="['fas', 'spinner']" [pulse]="true"></fa-icon>

테두리:

<fa-icon [icon]="['fas', 'coffee']" [border]="true"></fa-icon>

좌/우로 밀어 정렬시키기:

<fa-icon [icon]="['fas', 'coffee']" pull="left"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" pull="right"></fa-icon>

고급 사용 예시

Mask 와 Transform:

• 두 개의 아이콘을 결합하여 하나의 모양을 만들 수 있습니다. 또한 Transform 옵션을 사용하면 크기의 확대/축소 및 위치와 회전 등을 세밀히 조정할 수 있습니다.

<fa-icon [icon]="['fas', 'coffee']" transform="shrink-9 right-4" [mask]="['fas', 'square']"></fa-icon>

클릭하여 스핀 에니메이션 토글하기:

<fa-icon [icon]="['fas', 'sync']" [spin]="isSyncAnimated" (click)="isSyncAnimated=!isSyncAnimated"></fa-icon>

사용자 입력값에 따라 회전시키기:

<fa-icon [icon]="['fas', 'magic']" transform="rotate-{{magicLevel}}"></fa-icon>
<input type='range' [value]="magicLevel" (input)="magicLevel=$event.target.value"/>

레이어:

• 레이어 기능을 활용하여 Icon 을 겹쳐서 표시할 수 있습니다.

<fa-layers [fixedWidth]="true">
  <fa-icon [icon]="['fas', 'square']"></fa-icon>
  <fa-icon [inverse]="true" [icon]="['fas', 'spinner']" transform="shrink-6"></fa-icon>
</fa-layers>

레이어 텍스트:

<fa-layers [fixedWidth]="true">
  <fa-icon [icon]="['fas', 'square']"></fa-icon>
  <fa-layers-text content="Yo" style="color: white;" transform="shrink-4"></fa-layers-text>
</fa-layers>

레이어 카운터:

<fa-layers [fixedWidth]="true">
  <fa-icon [icon]="['fas', 'envelope']"></fa-icon>
  <fa-layers-counter content="99+"></fa-layers-counter>
</fa-layers>

참고

• FontAwesome 가이드
• Angular | font Awesome