<head> 내에 스타일시트 추가
<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" />
속성
- opsz (크기) : 20 ~ 48px
- wght (굵기) : 100 ~ 700
- FILL (채움 여부) : 0(비어있음) ~ 1(채움)
- GRAD (기울기 효과) : -50 ~ 200
- 마지막 부분에 ?icon_names= 파라미터값으로 들어가 있는 부분은 본인이 선택한 아이콘명이므로, 삭제해도 됨
1. HTML 코드 내에 삽입
<span class="material-symbols-outlined">
icon name
</span>
icon name은 선택한 아이콘 정보에서 하단에 보면 Icon name 영역이 있음
2. 가상 선택자로 사용
<style>
.icon:before {
font-family: "Material Symbols Outlined";
content:'icon name';
}
</style>
font-family 로 구글 아이콘을 선언해주고, content 에 icon name 을 넣으면 됨
color, font-size, font-weight 부여 가능
'HTML & CSS' 카테고리의 다른 글
| [CSS] input checked 스크롤 상단 이동 (0) | 2025.04.03 |
|---|---|
| [SCSS] mixin 으로 padding, margin 값 부여하기 (like tailwindcss) (1) | 2025.04.02 |
| tailwindcss cdn 적용 (0) | 2025.03.06 |
| [CSS] SCSS 문법 (0) | 2022.02.14 |