구글 폰트에서 아이콘도 지원

보통 아이콘을 넣을 때 awesome 폰트를 이용한다. 그러나 써보면 알겠지만 어썸폰트를 쓰려면 회원가입도 해야하고 유료인 아이콘도 존재하다. 그러던 어느날 구글에서 아이콘도 지원해주는 것을 발견! 다음 프로젝트엔 구글 아이콘을 써보려고 한다.

 

 

fonts.google.com/icons

Google Fonts

 

아이콘 가이드

developers.google.com/fonts/docs/material_icons

Material Icons Guide  |  Google Fonts  |  Google Developers

---

 

 

1. Material icons 를 활성화하기 위해 link를 걸어주고 사용하는 것을 잊지 말자!

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

*다른 Google 웹 글꼴과 마찬가지로 브라우저에 맞는 'Material Icons'글꼴을 활성화하기 위해 올바른 CSS가 제공됩니다. 라는 추가 CSS 클래스가 선언 .material-icons됩니다. 이 클래스를 사용하는 모든 요소는 웹 글꼴에서 이러한 아이콘을 렌더링하는 올바른 CSS를 갖습니다.

 

 

2. 웹에서 사용 방법

ex) 사람 얼굴 아이콘을 넣고 싶을 때

<span class="material-icons">face</span>

* 이 예제에서는 ligatures 라는 인쇄 기능 을 사용하여 단순히 텍스트 이름을 사용하여 아이콘 글리프를 렌더링 할 수 있습니다. 대체는 웹 브라우저에 의해 자동으로 수행되며 동등한 숫자 참조보다 더 읽기 쉬운 코드를 제공합니다.

 

 

구글에서 말해주듯, span 사이에 넣고 싶은 아이콘 이름을 넣으면 작동한다.

이것은 실제로 웹이 

<span class="material-icons">&#xE87C;</span>

이런 식으로 읽어서 가능한 모양.

 

 

때마침 내가 서치 아이콘을 써야할 일이 있어서 구글 아이콘으로 적용해서 넣어보았다. 

<span class="material-icons">search</span>

잘 들어오는 것을 확인!

 

 

 

 

구글 아이콘 웹사이트에 들어가면 더 자세하고 CSS 스타일링 가이드도 나와있으니 참고해보자.