웹솔루션개발 25년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] 구글 material-icons CDN 방식으로 사용하기 본문

웹프로그램밍 자료실/기타 자료

[해피CGI][cgimall] 구글 material-icons CDN 방식으로 사용하기

해피CGI윤실장 2019. 9. 4. 09:16

​

 

 

작업중인 사이트의 <head> 태그 안에 아래의 코드를 삽입합니다.

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

아래 사이트에서 원하시는 아이콘을 선택합니다.

https://material.io/tools/icons/?style=baseline

 

 

아이콘을 선택하고 좌측의 소스를 복사하여 사용할 수 있습니다.




/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

css 를 추가하여 크기, 색상, 배경색 등을 변경이 가능합니다.



 

홈페이지바로가기

저작자표시 (새창열림)

'웹프로그램밍 자료실 > 기타 자료' 카테고리의 다른 글

[해피CGI][cgimall] 웹 프레임워크 uikit  (0) 2019.09.10
[해피CGI][cgimall] 폰트유형별 스케일을 확인하는 폰트 스케일 계산기 type-scale  (0) 2019.09.09
[해피CGI][cgimall] Css 3D Buttons - freefrontend.com  (0) 2019.09.03
[해피CGI][cgimall] AIBRIL - 한/영 언어 번역 API  (0) 2019.08.28
[해피CGI][cgimall] AIBRIL - 이미지내의 문자인식 API  (0) 2019.08.27
공유하기 링크
'웹프로그램밍 자료실/기타 자료' Related Articles more
Comments