django 스터디를 하는 중 10장에서 갑자가 Font Awesome의 아이콘이 안보이는 오류가 발생했다.
<script src="https://kit.fontawesome.com/*******.js" crossorigin="anonymous"></script>도 잘 작성했고, font의 html코드도 맞게 복사했는데 아이콘이 보이지 않았다.
이전에 사용했을 때는 잘 보였는데 갑자기 보이지 않아서 당황했다. 책에 있는 버전을 그대로 치면 잘 나오는데, 지금 사이트의 태그는 적용이 안되는 것이다.
알고보니 Font Awesome이 버전 5로 업데이트 되며 태그 방식이 바뀌었기 때문이다.
버전은 총 5가지가 있다.
- Regular(far)
- Light(fal)
- Douton(fad)
- Solid(fas)
- Brands(fab)
아래 두 가지만 무료로 사용할 수 있다.
사이트에서는 <i class="fa-solid fa-file-csv"></i>
책에서는
<i class="fas fa-file-csv"></i>
였는데, 책 버전으로 작성해야 적용이 되었다.
하지만 내 사이트에서는 최신 버전으로 뜨는데 왜 옛 버전으로 작성해야 되는지...잘 모르겠다. 아마 이 사이트는 버전 5 이전 태그만 제공해고, 최신 버전의 CDN을 적용하고 싶으면
https://cdnjs.com/libraries/font-awesome
font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
The iconic SVG, font, and CSS toolkit - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make
cdnjs.com
위 사이트에서 최신 버전의 링크를 복사해 잘..사용하면 될 듯하다.
난 이번에 중점으로 배우는 것이 프론트가 아니기 때문에 그냥 책에 있는 태그를 사용했다. 웃긴 점은 최신 버전에만 있는 아이콘은 또 사용이 가능한 것 같았다.
검색하면서 아이콘을 크기나 색상 등 다양하게 바꾸어 사용할 수 있는 것 같았다. 또, 애니메이션 효과도 넣을 수 있어서 잘 사용하면 예쁠 것 같다.
지금 당장은 어렵지만 사이트가 완성되고 나면 다시 꾸며보고 싶다.
참고사이트
- Font Awesome 공식문서(아이콘 꾸미기)
https://fontawesome.com/docs/web/style/animate
Animating Icons
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
-오류 해결
https://velog.io/@remon/Font-Awesome-Error-fas-fa-solid
Font Awesome Error!! (fas? fa-solid?)
검색바 만들기를 진행하던 중 👾에러가 생겼다ㅎ완성해야 될 화면.. 3가지의 아이콘이 필요했다. 근데 폰트어썸 아이콘이 안나온다..
velog.io
