https://material.io/tools/icons/

ionicons 아이콘 폰트를 사용하다가 구글에서 무료로 제공하는 머티리얼 아이콘 폰트를 적용해봤다. 역시 간단하게 사용할 수 있도록 CDN을 제공한다. 아래 CDN 코드를 head 태그 사이에 삽입하자.

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

기본적으로 다른 아이콘 폰트와 동일하게 i 태그를 사용하고 클래스 명은 material-icons 를 사용하는데 i 태그 사이에 원하는 아이콘의 이름을 써넣으면 아이콘이 출력된다. 예시로 face 아이콘 출력을 원한다면 아래와 같이 하면 된다.

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

.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; }

또한 위와 같은 속성을 CSS에 추가하면 아래와 같이 편하게 크기를 변경하는 것도 가능하다.

face <i class="material-icons md-18">face</i>

face <i class="material-icons md-24">face</i>

face <i class="material-icons md-36">face</i>

face <i class="material-icons md-48">face</i>

이 외에도 깔끔한 디자인과 다양한 종류의 아이콘들이 카테고리 별로 잘 정리되어 있다. 이전에 사용하던 아이콘 폰트는 디자인은 마음에 들었지만 종류가 한정적이었고 로딩 속도가 느려서 깜빡이는 현상이 있었는데, 머티리얼 아이콘 폰트는 무엇보다 로딩 속도가 매우 빨라서 만족한다.

반응형

티스토리툴바