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

 

 

구글에서 제공하는 머티리얼 Material 무료 아이콘은 웹폰트 뿐만 아니라 svg와 png 형식으로도 사용 할 수 있습니다.

 

 

google.github.io/material-design-icons/

Material Icons Guide - Google Design

 

Material Icons Guide에서 자세한 설명을 확인 할 수 있습니다.

 

 

머티리얼 아이콘은 현대적이고 단순한 디자인으로 모든 일반 플랫폼 및 디스플레이 해상도에서 최적화 되어있어 크고 작은 크기 모두 가독성과 선명도를 보장하는 아이콘입니다.

 

Git Repository

$ git clone http://github.com/google/material-design-icons/

깃 저장소를 복제해서 사용가능

 

 

Installing icons from bower

$ bower install material-design-icons

 

 

Installing icons from npm

npm패키지 관리자를 사용하여 설치하기

$ npm install material-design-icons

 

 

 

---

 

 

웹폰트 아이콘으로 사용하기

 

 

머티리얼 아이콘 설치하기 ::

 

 

설정방법 1. 구글웹폰트를 통해서 사용하기

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

html페이지 head 영역에 위와 같은 CDN을 적어줍니다.

 

 

 

설정방법 2. 다운로드하여 직접설치하기

1번 방법이 간단하기는 하지만 인터넷 연결이 되어야하고 매번 불러와야 하니까 좀더 안정적으로

다운받아서 설정해 보도록하겠습니다.

 

 

다운로드는 위에 Material Icons Guide 사이트에서

 

Downloading everything에서 다운받아도 되고

 

 

github.com/google/material-design-icons/tree/master/font

google/material-design-icons

google에 material-design-icons 깃허브에 가면 다운받을 수 있습니다.

 

 

다운받은 파일에 iconfont를 적용시킬 위치에 복사 붙여넣기 합니다.

 

 

아래의 코드를 css에 넣어줍니다.

/* iconfont */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(../iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'),
      local('MaterialIcons-Regular'),
      url(../iconfont/MaterialIcons-Regular.woff2) format('woff2'),
      url(../iconfont/MaterialIcons-Regular.woff) format('woff'),
      url(../iconfont/MaterialIcons-Regular.ttf) format('truetype');
  }

 

위에 font-face를 적용했으면 material-icons 클래스를 아래와 같이 생성해야 합니다.

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
  
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
  
    /* Support for IE. */
    font-feature-settings: 'liga';
  }

 

 

 

Material icons 사용방법::

 

fonts.google.com/icons?selected=Material+Icons

Google Fonts

 

 

원하는 아이콘을 검색해서 찾고

 

 

 

 

화면 왼쪽에 

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

 

코드를 복사해서 필요한 위치에 사용하면 됩니다.