🎉 Font Awesome 5 PRO 버젼 다운 & 사용법 💯 정리

...

Font Awesome 5 PRO 버젼 (v5.15.4)

전세계에서 가장 많이 쓰는 폰트 라이브러리의 폰트어웨이썸5의 최신버젼인 5.15.4v를 소개해본다.

현재 최신 6.0 버젼이 나왔지만 아직 베타 기간이며, PRO버젼을 쓸려면 당연히 년간 100달러를 납부해야한다.

폰트어썸5 버젼만 해도 압도적이고 퀄리티 높은 여러개의 폰트들을 제공하며,

PRO버젼이라 더욱더 다양한 추가 폰트를 지원해주고 4가지 추가 폰트옵션도 제공한다.

티스토리 스킨에 적절히 사용하면 보다 높은 홈페이지를 꾸밀수 있다.

본인 블로그의 왼쪽 사이드바 아이콘 역시 폰트어썸 PRO 버젼을 사용했다.

Font Awesome 5 PRO 설치

PRO버젼 다운링크가 적용된 해당 html 태그를 티스토리 스킨이나 프로젝트에 붙여준다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css" />

원하는 폰트를 골라 적용시키는 방법은, 아래 공식홈페이지에 들어가, 스샷의 화살표처럼 5.15.4로 버젼을 설정해주고 둘러보면 된다.

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

Font Awesome 5 PRO 사용법

기본 태그 사용법

<i>태그에 css클래스를 두개 선언해주면 되는데,

첫번째는 폰트스타일 (fas, far, fal, fad ...) (사진에 보듯이 꽉 칠해져있거나 연한 색깔이 있거나 테두리색만 있거나)
두번째는 폰트아이콘를 선택하면 된다. (사진에는 user라는 폰트 아이콘을 사용했다)

스타일 Prefix에서 fa는 Font Awesome의 머릿글자를 뜻하고

뒤에 붙은 s는 Solid, r은 Regular, l은 Light, d는 Duotone, b는 Brands의 첫글자를 의미한다고 보면된다.

<body>
  <!-- solid style -->
  <i class="fas fa-user"></i>

  <!-- regular style -->
  <i class="far fa-user"></i>

  <!-- light style -->
  <i class="fal fa-user"></i>

  <!-- duotone style -->
  <i class="fad fa-user"></i>

  <!--brand icon-->
  <i class="fab fa-github-square"></i>
</body>

아이콘 크기 설정법

css로 font-size를 지정해주거나,
간편하게 fa-la, fa-2x, fa-3x, fa-4x, fa-5x의 클래스 값을 추가해서 크기를 조절 할수있다.

<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>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>

아이콘 여백 정렬

fa-fw 클래스 값을 추가하면 하나 이상의 아이콘을 동일한 고정 너비로 설정한다.

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

리스트 모양에 아이콘 설정

li 리스트 태그를 쓰면 동그란 아이콘으로 목록이 생성됨을 사용해 봐서 알 것이다.

이 동그란 디폴트 아이콘을 폰트어썸의 아이콘으로 사용할수도 있다.

fa-li 클래스값을 추가하여 <ul>과 <ol>의 불릿을 다른 모양으로 변경한다.

<ul class="fa-ul">
    <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
    <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
    <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
    <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

아이콘 회전시키기

<i class="fas fa-snowboarding fa-rotate-90"></i>
<i class="fas fa-snowboarding fa-rotate-180"></i>

아이콘 회전 애니메이션 적용하기

로딩스크린 같이 아이콘을 빙글빙글 애니메이션을 적용 시킬 수 있다.

<i class="fas fa-sync fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>

머릿글문자 넣기

fa-pull-left, fa-pull-right을 클래스에 명시하면, 머릿글을 꾸밀 수 있다.

 <i class="fas fa-quote-left fa-2x fa-pull-left"></i>
  Gatsby believed in the green light, the orgastic future that year by year recedes before us.
  It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further...
  And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.

아이콘 2개 겹쳐 적용하기

fa-stack	2개 겹치기
fa-stack-1x	작게 보일 아이콘에 적용
fa-stack-2x	크게 보일 아이콘에 적용
fa-inverse	기본 크기로 표시되는 아이콘의 색상을 반전

<span class="fa-stack fa-2x">
    <i class="fas fa-square fa-stack-2x"></i>
    <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>

<span class="fa-stack fa-2x">
    <i class="fas fa-circle fa-stack-2x"></i>
    <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>

<span class="fa-stack fa-2x">
    <i class="fas fa-square fa-stack-2x"></i>
    <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
</span>

<span class="fa-stack fa-4x">
    <i class="fas fa-square fa-stack-2x"></i>
    <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
</span>

<span class="fa-stack fa-2x">
    <i class="fas fa-camera fa-stack-1x"></i>
    <i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i>
</span>

CSS로 아이콘 사용법

f숫자로 이루어진 코드를 복사해, css before 가상선택자의 content 속성에 명시해주면 된다.

span::before {
	font-family: 'Font Awesome 5 Pro'; /* 폰트어웨이썸 글꼴 명시 */
	content: '\f007'; /* 위에서 복사한 폰트아이콘 코드 */
	font-weight: 600; /* 아이콘 굵기 */
	font-size: 13px; /* 아이콘 크기 */
}

SVG 사용법

svg 버튼을 눌러 복사를 하고 html에 붙여넣으면 된다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
	<path d="M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5 9.9-67.2 26L73 243.2c22-20.7 50.1-35.1 81.4-40.2l75.3-85.7-42.6-24.8-51.6 46c-30 26.8-70.6-18.5-40.5-45.4l68-60.7c9.8-8.8 24.1-10.2 35.5-3.6 0 0 139.3 80.9 139.5 81.1 16.2 10.1 20.7 36 6.1 52.6L285.7 229l106.1-5.9c18.5-1.1 33.6 14.4 32.1 32.7zm-64.9-154c28.1 0 50.9-22.8 50.9-50.9C409.9 22.8 387.1 0 359 0c-28.1 0-50.9 22.8-50.9 50.9 0 28.1 22.8 50.9 50.9 50.9zM179.6 456.5c-80.6 0-127.4-90.6-82.7-156.1l-39.7-39.7C36.4 287 24 320.3 24 356.4c0 130.7 150.7 201.4 251.4 122.5l-39.7-39.7c-16 10.9-35.3 17.3-56.1 17.3z"/>
</svg>

SVG는 백터이미지로 사이즈를 아무리 크게 해도 이미지가 깨지지 않으면서 작은 용량 그대로 유지한다는 장점이 있다.
그래서 근래 들어 사용 빈도가 높아지고 있는 이미지 포멧이다. SVG는 보통 react나 vue.js, Angular 에서 모듈형식으로 많이 사용되어 지고 있는 편이다.

기존 방식인 Font형식으로 아이콘을 사용할 경우 내가 필요한 1~2개의 아이콘을 사용하기 위해 모든 아이콘을 일단 받아놓고 적용해야 하는 용량(트래픽) 압박의 단점이 있지만 SVG를 사용할 경우는 내가 필요한 1~2개의 아이콘만 받으면 되니까 트래픽의 장점이 생긴다.
하지만, 코드를 보면 알수 있듯이 html코드 길이가 길어져 SEO 면에서는 약간 단점이 될수도 있긴 하다.

See the Pen Test Out Font Awesome Pro Version 5.11 by letterliu (@letterliu) on CodePen.

# 참고자료

https://fontawesome.com/v4/examples/

https://markettraders.kr/font-awesome/