Font Awesome 사용법 (무료버전)

1. 기본 세팅
2. 아이콘 추가

기본 세팅

core 설치
npm i --save @fortawesome/fontawesome-svg-core

package 설치
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

react component 추가
npm i --save @fortawesome/react-fontawesome@latest

아이콘 추가

아이콘 넣고 싶은 파일에 라이브러리 추가
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

웹사이트에서 원하는 아이콘 찾아서 추가
아이콘 찾아보기
import { faUser } from '@fortawesome/free-solid-svg-icons' <FontAwesomeIcon icon={faUser} style={{ color: '#656667' }} />

같은 아이콘 모양이라도 스타일이 다른 경우는 그에 맞게 라이브러리를 추가 해줘야함
보통 무료버전엔 solid와 regular 두가지가 있다.
import { faUser } from '@fortawesome/free-regular-svg-icons'

Font Awesome 문서 참고