728x90
반응형
■ 머티리얼 아이콘 material-icons 구글에서 제공하는 웹폰트 (아이콘) 모음
■ 사용법
1. CSS 파일 적용
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">2. 하기 링크 내 사용할 아이콘 찾기
https://fonts.google.com/icons
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
Material Icons
Get Material Icons
material.io
3. 사용할 아이콘 i 태그 추가
<i class="material-icons">home</i>
4. 페이지 호출 시 정상적으로 아이콘 노출되는 것을 확인할 수 있음 (CSS로 디자인 수정 가능. 색상/크기 등)
<i class="material-icons" style="color:red; font-size:100px;">home</i>
728x90
반응형
'CSS' 카테고리의 다른 글
| [CSS] nth-child n배수 요소 선택하기 nth-child(n+n) (0) | 2021.04.15 |
|---|---|
| [CSS] box-shadow 박스 그림자 효과 (0) | 2021.04.12 |
| [CSS] :not(:first-child), :not(:last-child) (0) | 2020.07.10 |
| [CSS] scroll css (스크롤 디자인) (0) | 2020.06.24 |
| [CSS] html 테이블 헤더 고정 (table thead 고정) tbody 스크롤(scroll) (0) | 2020.05.12 |