구글 폰트 아이콘(material-icons) 사용 방법
CSS 24.02.07Google Material Icons는 Google에서 제공하는 아이콘 라이브러리로, 웹 및 앱 프로젝트에서 사용하기 용이합니다. 아래는 Google Material Icons를 사용하는 간단한 방법입니다.
1. Google Material Icons 라이브러리 추가
가장 먼저, 프로젝트에 Google Material Icons 라이브러리를 추가해야 합니다. 다음과 같이 HTML 파일의 부분에 다음 링크를 추가합니다.
1 | <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> | cs |
2. 아이콘 사용
이제 사용하려는 아이콘을 HTML 요소에 추가할 수 있습니다. 태그를 사용하고 클래스에 "material-icons"를 추가하고, 내용에는 원하는 아이콘의 이름을 넣습니다.
1 | <i class="material-icons" style="font-size: 24px; color: #2196F3;">face</i> | cs |
Google Material Icons를 웹 프로젝트에서 쉽게 사용할 수 있도록 도와주는 다양한 라이브러리와 프레임워크도 있으니, 프로젝트의 특정 환경에 따라 선택하여 사용할 수도 있습니다.
예제
See the Pen
google material-icons by designkits (@designkits)
on CodePen.
