구글 머티리얼 아이콘폰트 적용하기

https://fonts.google.com/icons

사용하려는 아이콘 클릭 > 우측 하단 > static icon 링크 복사 > HTML 삽입 > CSS 조정

 

 

 

html 상단 link로 삽입

 

 

 

 

 

 

아이콘 넣기 > 다시 구글 폰트에서 하단 Inserting the icon > span 태그 복사

 

 

 

 

 

 

 

 

 

 

이미지가 아닌 폰트기 때문에 폰트로 적용

 

 

 

 

CSS적용

 

 

 

 

 

 

 

※ <span> 태그를 <i>로 변경 (아이콘 표시에만 쓰기때문에 변경)

 

아이콘이 매우 많이 (100개이상) 필요하거나 CMS 관리자 페이지 디자인시 사용

비지니스 사이트에서는 사용할 필요없음

아이콘 폰트 사용시 로딩시간이 길어질 수 있기때문에 실무에선 거의 사용안함