채니의 개발일기

구글머티리얼 아이콘 사용방법 본문

프론트엔트/HTML,CSS

구글머티리얼 아이콘 사용방법

윤채니챈 2023. 7. 14. 22:48
728x90
반응형

기본적인 아이콘들은 구글에서 CSS코드를 제공한다 

그러면 머티리얼 아이콘 사용밥을 알아보자

 

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

 

1.head에 추가

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

 

2. body태그에 추가

<div class="material-icons">upload</div>

 

3. 이름을 변경하면서 아이콘을 바꾼다 ex) <div class="material-icons">Done</div>

 

728x90
반응형

'프론트엔트 > HTML,CSS' 카테고리의 다른 글

css선택자(기본선택자,태그선택자,클래스선택자,아이디선택자)  (0) 2023.07.16
CSS:너비(width, height), 인라인과블록요소  (0) 2023.07.16
CSS - 웹폰트  (0) 2023.07.14
HTML - tap에 이미지추가  (0) 2023.07.14
CSS:전반적인 개요 (class와id, 스타일 속성작성, 종속성, 영역,스타일초기화)  (0) 2023.07.13
'프론트엔트/HTML,CSS' Related Articles more