Logo
  • HOME
  • GALLERY
  • BLOG
09/14/2018 by WONY CSS, Web Programming 0

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

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

CDN 추가하는 방법은 생략합니다.

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)를 사용할 수 있다.

1
2
3
4
5
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) 를 지원하지 않는 폰트이다.

1
2
3
4
5
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)과 같다.

1
2
3
4
5
6
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 과 같은 결과를 볼 수 있다.

1
2
3
4
5
6
7
8
9
10
11
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);}
}

 

Brands Style (fab) css3 FontAwsome Regular Style (far) Solid Style (fas) spin unicode 유니코드 폰트어썸
share
1

WONY

learning java, c, html photo.. -_-

RELATED POSTS

11/27/2017by WONY0

Notepad++ 에서 C / C++ 컴파일하고 실행하기

read on
share
9
01/18/2020by WONY0

영카트5 상품요약정보 감추기

read on
share
0
iframe 에 페이지가 뜨지 않는 경우 X-Frame-Optionsprevious post
영카트5 상품요약정보 감추기next post

Hi I am Joongwon amateur photographer based in Daejeon City in South Korea.

CATEGORIES

  • C Programming
  • CMS
    • YoungCart5
  • JAVA Programming
    • JAVA Source code
  • Linux
    • Ubuntu
  • Web Programming
    • CSS
    • HTML
    • JSP/Servlet

RECENT POSTS

  • NGINX 워드프레스 404 not found error
  • AWS EC2 Ubuntu 18.04 LTS 에서 vsFtpd 설정
  • 영카트5 상품요약정보 감추기
  • FontAwesome 5 유니코드(Unicode) 사용하기 그리고 CSS3에서 스핀(Spin)
  • iframe 에 페이지가 뜨지 않는 경우 X-Frame-Options

RECENT COMMENTS

    © 2020 John Black