웹 개발에 필요한 아이콘들을 구글에서 무료로 사용할 수 있습니다.
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
우선 사용하기 전에 CSS를 연결해 주어야 합니다. <head>태그 내에다가 연결을 하면됩니다.
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
material icons CSS 연결에 대해 더 자세한 정보가 필요하다면 아래 사이트를 참고해주세요.
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
material.io
CSS 연결을 했다면 다음 단계는 원하는 icon을 찾아 연결을 하면 되는데요. 여기서 주의해야 할 점은 태그의 클래스를 "material-icons"로 통일 시켜줘야합니다.
예를 들어 옆 모양의 돋보기 아이콘을 사용하고 싶다면
<span class="material-icons"> search </span>
처럼 클래스를 통일해주고 태그 내에 자신이 원하는 아이콘의 이름을 입력해주면 됩니다.
span 태그 뿐만 아니라 a태그, div 태그 모두 사용가능하니 상황에 맞게 사용하면 됩니다.
'Frontend' 카테고리의 다른 글
| 15. HTML 오픈 그래프란 무엇인가 (0) | 2021.08.02 |
|---|---|
| 14. 웹 개발에 필요한 구글 무료 웹 폰트 사용하기 (0) | 2021.08.02 |
| CSS 복습 - Overwatch (0) | 2021.07.29 |
| 12-7 CSS 속성 - 변환 (0) | 2021.07.27 |
| 12-6 CSS 속성 - 전환 (0) | 2021.07.27 |
