Font Awesome 5 사용법 (ver 4 포함)

Font Awesome은 웹에서 아이콘이 필요할 때 가장 많이 사용되는 라이브러리 중에 하나입니다. Font Awesome 5가 출시된지 시간이 꽤 흘렀음에도 불구하고, 아직까지도 Font Awesome 4가 많이 사옹되고 있습니다. 여러 가지 이유가 있겠지만 저는 개인적으로 Font Awesome가 일부 아이콘들을 유료화하는 과정에서 다소 복잡해진 부분이 없지 않은 것 같습니다. 하지만 Font Awesome에서 이전 버전에 대한 공식 지원을 중단했기 때문에 최소한 프로젝트에서는 가급적 최신 버전을 쓰는 것이 권장됩니다.

이번 포스팅에서는 Font Awesome 4 대비 Font Awesome 5에서 달라진 점에 중점을 두어 새로워진 Font Awesome의 사용 방법을 살펴보겠습니다.

Font Awesome 설치하기

실제 CSS 파일을 다운로드 받은 후에 설치할 수도 있겠지만, 여기서는 간편하게 CDN 서비스를 이용하도록 하겠습니다.

다음과 같이 html 파일을 열고 head 태그 안에 link 태그로 CDN 서비스의 URL을 지정해주기만 하면 바로 Font Awesome 5를 사용할 수 있습니다.

<head>
  <!-- ... -->
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"
  />
  <!-- ... -->
</head>

참고로 Font Awesome 4는 다음과 같이 URL만 바꿔주시면 됩니다.

<head>
  <!-- ... -->
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
  />
  <!-- ... -->
</head>

Font Awesome 5의 아이콘 분류 체계

아이콘의 종류가 폭발적으로 증가하면서 Font Awesome 5에서는 단순하던 Font Awesome 4와 다르게 아이콘들을 카테고리 별로 분류하고 있습니다. 크게 Solid, Regular, Light, Brands 이렇게 4개의 카테고리로 분류가 되는데, Light 카테고리에 있는 아이콘들은 전부 유료이기 때문에 써본 적이 없습니다. ㅋㅋㅋ 반면에 Brands 카테고리는 여러 유명한 회사의 로고를 아이콘으로 제공하며 전부 무료입니다. 다행히 대부분의 경우에는 Solid, Regular 카테고리에서 무료로 제공되는 아이콘 만으로도 충분하고도 남기 때문에 크게 걱정하실 필요는 없을 것 같습니다.

Font Awesom 아이콘 사용하기

Font Awesome 4와 동일하게 Font Awesome 5에서도 <i> 태그를 이용해서 아이콘을 사용합니다.

하지만, 위에서 설명했던 아이콘의 분류 체계가 클래스 속성에도 적용되기 때문에 기존에 단순히 fa가 아닌 fas, far, fab 중 하나가 사용됩니다. 따라서 똑같은 카메라 아이콘이 다음과 같이 버전에 따라 다른 클래스 이름을 사용해야 함에 주의하셔야 합니다.

Font Awesome 4

<i class="fa fa-camera"></i>

Font Awesome 5

<i class="fas fa-camera"></i>

Font Awesome 아이콘 검색하기

Font Awesome에서 제공하는 아이콘의 수가 방대하고 그에 대응하는 클래스명을 외울 수도 없기 때문에, 사용하고 싶은 아이콘을 효율적으로 검색하는 것이 중요합니다.

Font Awesome 5의 경우, 아래 페이지에서 아이콘을 카테고리나 유/무료 여부에 따라 필터링 하면서 검색할 수 있습니다.

https://fontawesome.com/icons

그냥 Ctrl + F로 검색하는 게 편하시는 분들은 아래 페이지가 더 유용하실 것입니다.

https://fontawesome.com/cheatsheet

Font Awesome 4의 경우, 아래 페이지에서 원하시는 아이콘을 쉽게 검색하실 수 있으십니다.

https://fontawesome.com/v4.7.0/icons/

Font Awesome 아이콘 제어하기

<i> 태그의 class 속성을 추가해주면 아이콘의 모양을 다양하게 변형할 수 있습니다.

예를 들어, 아이콘의 크기를 2배로 키우고 싶으면 fa-2x를 class 속성에 추가해주면 됩니다.

<i class="fas fa-camera fa-2x"></i>

그 밖에도 다양하게 아이콘 모양을 바꿀 수가 있는데, 하나씩 설명하는 것보다는 아래 예제 코드를 훑어 보시면 금방 감이 잡히실 것입니다.

참고로 Font Awesome 4를 사용하셔야 하는 분들을 위해서 Font Awesome 4를 사용한 예제 코드도 아래 올려두었습니다.

Font Awesome 5의 SVG 지원

Font Awesome 4 대비 Font Awesome 5의 가장 강력한 부분은 SVG 기반 아이콘을 지원한다는 것입니다. 이 기능은 웹사이트에서 바로 Font Awesome을 사용할 때 보다는 React와 같은 라이브러리와 함께 Font Awesome을 사용하는 경우 많이 사용됩니다. 이 부분에 대해서는 추후 React에서 Font Awesome을 사용하는 방법에 대한 포스팅할 때 같이 다뤄보도록 하겠습니다.