FontAwesome 5 유니코드(Unicode) 사용하기 그리고 CSS3에서 스핀(Spin)

안녕하세요 WONY입니다.

 

CSS에서 FontAwesome 5 유니코드(Unicode) 사용하기에 대해서 알아보겠습니다.

FontAwesome 설치 방법은 생략하겠습니다.

 

https://fontawesome.com/

Font Awesome

Regular Style (far)는 font-weight가 없어도 되지만 font-weight 600을 주면 Solid Style (fas)이 됩니다.
즉 Regular Style (far)과 Solid Style (fas) 이 함께 존재하는 폰트의 경우 유니코드가 같으므로 font-weight을 통해 Regular Style (far) 과 Solid Style (fas)를 사용할 수 있다.

 

예제는 아래와 같습니다.

 

p.far-fa-file::before {
   content: '\f15b';
   font-family: "Font Awesome 5 Free";
   font-weight: 100;
}

 

Solid Style (fas)는 Regular Style (far)과 다르게 font-weight 600 이상 또는 bold 값을 넣어야 사용할 수 있습니다.
즉 Regular Style (far)를 지원하지 않는 폰트입니다.

 

p.fas-fa-file::before {
   content: '\f15b';
   font-family: "Font Awesome 5 Free";
   font-weight: 600;
}

 

Brands Style (fab)는 font-family에 Free 가 아닌 Brands를 넣어야 합니다.
font-weight을 넣어도 되고 넣지 않아도 된다 즉 Regular Style (far)과 같습니다.

 

p.fab-fa-android::before {
   display: inline-block;
   content: '\f17b';
   font-family: "Font Awesome 5 Brands";
   font-weight: 900
}

 

FontAwesome  HTML <i> 태그로 이용할 때 class에 fa-spin을 추가하면 아이콘 회전을 할 수 있습니다.
CSS3에서 유니코드(Unicode)를 사용할 때는 아래와 animation과 keyframes를 이용하면 fa-spin과 같은 결과를 볼 수 있습니다.

 

p.fas-fa-spinner::before {
   content: '\f110';
   font-family: "Font Awesome 5 Free";
   font-weight: 600;
   display: inline-block;
   animation: spinner .6s linear infinite;
   animation-duration: 2s
}
@keyframes spinner {
  to {transform: rotate(360deg);}
}

 

이상 WONY 였습니다.