개요
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>
고급 사용 예시
- 두 개의 아이콘을 결합하여 하나의 모양을 만들 수 있습니다. 또한 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>
참고
'모듈, 프레임웍 > Angular' 카테고리의 다른 글
Angular 기초들 - 사용자입력 (0) | 2018.11.06 |
---|---|
Angular 외부 라이브러리 사용하기 (0) | 2018.09.27 |
Flex Layout 사용하기 (0) | 2018.09.16 |
음악신청 게시판 만들기 (0) | 2018.09.15 |
Angular Material 설치 및 간단한 예시 (0) | 2018.09.08 |