설치하기

1. 무료버전 한번에 설치

• 패키지명 @fortawesome 오타 아님! 그대로 설치!

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

2. 따로 설치하기

free라고 붙은 것만 무료고 pro는 유료버전

• 기본 패키지 설치

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome

• regular

npm i -S @fortawesome/free-regular-svg-icons
npm i -S @fortawesome/pro-regular-svg-icons

• solid

npm i -S @fortawesome/free-solid-svg-icons
npm i -S @fortawesome/pro-solid-svg-icons

• light

npm i -S @fortawesome/pro-light-svg-icons

• duotone

npm i -S @fortawesome/pro-duotone-svg-icons

• brand

npm i -S @fortawesome/free-brands-svg-icons

아이콘 사용

폰트어썸 아이콘 검색

• 아이콘명을 스네이크표기법 => 카멜표기법으로 변경하여 import해서 사용
  fa-search면 faSearch로 import해서 사용

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSearch } from "@fortawesome/free-solid-svg-icons";
// ...
<FontAwesomeIcon icon={faSearch} />

폰트어썸 사이즈

사이즈 단위

• 2xs
• xs
• sm
• lg
• xl
• 2xl

배수 단위

• 숫자x => 몇배크기로 커짐
  ex) 2x => 2배 커짐

사용예시

<FontAwesomeIcon icon={faSearch} size="xs" />
<FontAwesomeIcon icon={faSearch} size="3x" />

참고

How To Use Font Awesome 5 with React