Font Awesome 오류 해결

pengyu·2022년 10월 4일
1

html/css/js 연습

목록 보기
6/6
post-thumbnail

Font Awesome은 항상 사용할 때마다 멀쩡하게 실행된 적이 없다..👾

Ver이 바뀌거나, 사용법이 바뀌어서 찾아보고 해야 하는데

대표적으로 오류가 발생하는 게 네모 박스로 나타나거나, 아이콘 자체가 보이지 않는 경우이다

처음에는 CDN으로 사용하려 했지만 오류가 발생했다.. ☠

확실하게 하기 위해서 CDN으로 하지 않고 다운로드해서 사용했는데 이것조차도 오류가 발생해 버린 것..

해결

그래서 우리의 구원자 구글을 통해 찾아보다가 다른 사람들의 코드가 살짝 다르길래

" fashoppingcart" 앞에 fas 또는 fab를 넣는 사람들이 있길래 똑같이 작성해 보았다

이게 무슨 일이야..

fas, fab를 넣었더니 바로 나타났다..!😵

Font Awesome이 버전 5로 업데이트되면서 사용법이 복잡해졌다고 한다. 유료화가 되면서 스타일을 5가지로 분리했고, 2가지는 무료, 3가지는 유료로 사용할 수 있게 바뀌었다고 한다.

< 유료 >

Regular

<i class="far fa-camera"></i>

Light

<i class="fal fa-camera"></i>

Duoton

<i class="fad fa-camera"></i>

< 무료 >

Solid

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

Brands

<i class="fab fa-camera"></i>

버전 5는 fa-solid라고 표현하지만
지금은 버전 6이기 때문에 fas or fab라고 표현한다

따라서 무료로 사용하는 사람fasfab만 사용할 수 있다.

🔥 ver 6

1. 최신 버전의 CDN

https://cdnjs.com/libraries/font-awesome

위 링크를 가면 최신 버전의 CDN을 얻을 수 있다

2. 폰트어썸 로그인 후 kit's 설정 버전 업그레이드

Kits 에 들어가서

톱니바퀴 setting 에 들어간다

그리고 version을 알맞게 바꾸어주고 Save Detection 설정해 주면 끝!!

profile
초심을 찾아서

2개의 댓글

comment-user-thumbnail
2023년 12월 13일

덕분에 좋은 내용 잘 보고 갑니다.
정말 감사합니다.

답글 달기
comment-user-thumbnail
2024년 1월 28일

진심으로 감사합니다.
자꾸 안되서 정말..... 구글 머티리얼도 해봐도 안되서 애먹었는데 ㅠㅠ
새해 복 많이받으세요!

답글 달기