Font Awesome

fontawesome은 다양한 아이콘들을 제공함으로 css를 다룰때 누구나 한번쯤은 사용하는 package 입니다.
그러나 fontawesome은 4.x 대와 5.x, 6.x대의 사용법이 다르고 free(무료), pro(유료 - 유료버전도 몇가지로 나누어짐)에 따라 사용하는 방법과 지원하는 폰트가 달라서 헷갈리는 부분이 있습니다.
자세한 설명은 공식문서 를 참조하면 좋을듯 합니다.

• FontAwesome 버전별 설명

• 중요 : 상위버전은 하위버전의 class를 상속하고 있다.

4.x

아래와 같이 4.x 대와 그 이하 버전에서는 fa 라는 것을 사용합니다.

<i class="fa fa-home"></i>  # 무료로 사용가능 ()

5.x

<i class="fas fa-home"></i> // solid (무료)
<i class='far fa-home'></i>  // regular (유료)
<i class='fal fa-camhomeera'></i>  // light (유료)
<i class='fad fa-home'></i>  // duotone (유료)
<i class='fab fa-home'></i>  // brand (무료)

6.x

Classic Family

<i class="fa-solid fa-home"></i> // solid (무료)
<i class='fa-regular fa-home'></i>  // regular (유료)
<i class='fa-light fa-camhomeera'></i>  // light (유료)
<i class='fa-thin fa-home'></i>  // thin (유료)
<i class='fa-duotone fa-home'></i>  // duotone (유료)

Sharp Family

<i class="fa-sharp fa-solid fa-home"></i> // solid (유료)
<i class='fa-sharp fa-regular fa-home'></i>  // regular (유료)
<i class='fa-sharp fa-light fa-camhomeera'></i>  // light (유료)
<i class='fa-sharp fa-thin fa-home'></i>  // thin (유료)

Brands Family

<i class='fa-brands fa-home'></i>  // brand (무료)

버젼별 npm 설치

4.x

npm i font-awesome