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);} } |
RECENT COMMENTS