[Next] NextJs에서 구글 폰트 아이콘 사용하기
2022. 12. 29. 00:10ㆍStudy/Next
개요
지금 진행하고 있는 프로젝트에서 디자인을 맡은 후배들이 Figma에 작성해주면 구현하는 역할을 하고 있다!
디자인팀이 아이콘에 피그마 댓글로 다음처럼 달아줘서 물어봤더니 구글폰트 아이콘이라고 해서 사용법을 알아보게 되었다!
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0" />
구글 폰트 아이콘은 여기서!
https://fonts.google.com/icons?preview.size=37&icon.platform=web&icon.style=Rounded
Material Symbols and Icons - Google Fonts
Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.
fonts.google.com
원하는 아이콘을 클릭하면 다음과 같은 화면이 보인다. 우리가 이용할 방법은 Google Fonts의 CDN을 import 하는 것이다.
1. 스타일 sheet를 복사한다.
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0" />2. Next 프로젝트를 열고 Head에 삽입한다.
3. Inserting the Icons도 복사한다.
<span class="material-symbols-rounded">
menu_book
</span>4. 필요한 곳에 붙여넣는다.
5. 끝!
읽어주셔서 감사합니다! 틀린 정보가 있다면 언제든 댓글로 남겨주세요! 배움의 기회로 삼겠습니다!
Reference
- https://www.inflearn.com/blogs/1039