WEB개발이야기/웹퍼블리싱

Font Awesome 5를 슬기롭게 사용하는 방법

어쩌다보니여기까지~ 2020. 3. 27. 15:04

웹사이트를 개발하다 보면 아이콘이 필요한 경우가 많습니다. 인터넷을 찾아보면 다양한 방법과 형식으로 무료로 제공해 주는 웹사이트가 많이 있는데요. 그중에서도 가장 많이 사용되는 폰트어썸(Font Awesome)이라는 웹사이트가 있습니다. 예전에는 사용하는 방법에 대해서 이해하기도 쉽고 사용하기도 쉬웠는데 Font Awesome 5로 업데이트되면서 사용법이 상당히 복잡해 졌습니다. 그러면.. 복잡해져서 나빠진 것이냐? 하면 그렇지 않습니다. 잘 알고 슬기롭게 사용하면 이전 버전보다 더 좋아지고 더 많은 플랫폼을 지원하고 있다는 것을 알게 됩니다. 사실 폰트어썸에서도 먹고 살아야 하니 유료화 정책을 적용하기 위해 복잡해진 것도 없잖아 있습니다. ^^;

웹사이트에 폰트어썸(Font Awesome 5) 적용하기

여러가지 복잡한 방법이 있지만 가장 단순하게 사용할 수 있는 방법을 소개하도록 하겠습니다.

CDN으로 적용하기

원래는 폰트어썸사이트에 회원가입을 하고 CDN주소를 받아가야 합니다.

폰트어썸(Font Awesome 5) CDN 신청
회원가입은 이메일주소와 비밀번호만 받기 때문에 그렇게 위험스럽지는 않습니다만, 귀찮으니 다른 CDN 전문 제공사이트에서 링크를 얻도록하겠습니다.

cdnjs.com의 font-awesome 바로가가기

cdnjs.com의 font-awesom

일단 버전은 5.13이네요.
js를 사용할 수도 있지만, 일단은 기존의 방식인 CSS를 사용하는것이 편합니다.
이 all.min.css를 사용하면됩니다. 모든 것이 포함되어 있는 것이지요
몇가지로 분리되서 제공되는 css를 조합해서 적용할 경우에 사용됩니다.

HTML에 붙혀넣기

위에서 얻은 링크를 HTML의 <head></head> 사이에 붙혀넣기 합니다.

<html>
<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"> <!--CDN 링크 -->
</head>
<body>
</body>
</html>

SVG를 왜쓰는거야?
폰트어썸(Font Awesome) 을 5버전으로 판올림 하면서 가장 큰 특징 중에 하나가 SVG를 지원 한다는 것입니다. SVG는 백터이미지로 사이즈를 아무리 크게 해도 이미지가 깨지지 않으면서 작은 용량 그대로 유지한다는 장점이 있습니다. 그래서 근래 들어 사용 빈도가 높아지고 있는 이미지 포멧입니다.이 SVG는 보통 react나 vue.js, Angular에서 모듈형식으로 많이 사용되어 지고 있습니다.
기존 방식인 Font형식으로 아이콘을 사용할 경우 내가 필요한 1~2개의 아이콘을 사용하기 위해 모든 아이콘을 일단 받아놓고 적용해야 하는 용량(트래픽) 압박의 단점이 있지만 SVG를 사용할 경우는 내가 필요한 1~2개의 아이콘만 받으면 되닌까 트래픽의 장점이생깁니다.

폰트어썸(Font Awesome 5) 사용하기

CDN을 적용했으면 이제 아이콘을 적용하는 방법입니다.

버전 4까지만 해도 쉽게 적용을 했었는데 버전 5로 판올림하면서 많아진 폰트를 5가지로 분리하였고 2가지는 무료로 사용할 수 있게 하고 3가지는 유료로 사용할 수 있게 했습니다.

스타일	유,무료	스타일Prefix	적요예제
Solid	Free	fas	`<i class="fas fa-camera"></i>`
Regular	Pro Required	far	`<i class="far fa-camera"></i>`
Light	Pro Required	fal	`<i class="fal fa-camera"></i>`
Duotone	Pro Required	fad	`<i class="fad fa-camera"></i>`
Brands	Free	fab	`<i class="fab fa-font-awesome"></i>`

유료가 더 질 좋은 아이콘을 제공하지만 무료로도 어느정도는 사용이 가능합니다.

스타일 Prefix에서 fa는 Font Awesome의 머릿글자 뒤에 붙은 s는 Solid, r은 Regular, l은 Light, d는 Duotone, b는 Brands의 첫글자를 의미합니다.
그래서 무료로 사용하는 사람은 fas와 fab만 사용할 수있다고 보면 됩니다.

아이콘 보기

아이콘은 2가지 방식으로 찾을 수 있습니다.

무료 아이콘 보기

아이콘 확인

Free를 클릭하여 무료버전만 필터링 합니다.
그중에서 Solid만 필터링 합니다.
아이콘의 아래에 있는 아이콘이름을 복사합니다.
- 복사한 이름을 아래와 같이 fas fa- 다음에 적용합니다.
  -<i class="fas fa-address-book"></i>

무료 아이콘 cheatsheet로 보기

아이콘을 cheatsheet형식으로 제공합니다. 많이, 자주 사용하는 경우는 cheatsheet가 훨씬 편할 겁니다.

기본 적용방법

태그는 전통적으로 <i>태그를 사용합니다.

<i class="fas fa-camera"></i>
<i class="fas fa-camera"></i>
<i class="fab fa-aws"></i>
<i class="fab fa-github-alt"></i>

꾸미기(스타일링)

아이콘을 크기, 고정넓이, 리스트 아이콘, 회전, 애니메이션, 2개 합침, 스케일링과 포지셔닝, 마스킹, 레이어, 듀오톤 등의 꾸미기가 가능합니다.

내용이 너무 많아서 참고할 링크정보를 남깁니다.

최종 적용 샘플

최종적으로 참고할 수 있는 샘플입니다.

<html>
<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"> <!--CDN 링크 -->
</head>
<body>
  <i class="fas fa-camera"></i>
  <i class="fas fa-camera"></i>
  <i class="fab fa-aws"></i>
  <i class="fab fa-github-alt"></i>

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

</body>
</html>