구글 머티리얼 아이콘(Material icons) 폰트 사용하기

By우 푸

아이콘 폰트인 구글 머티리얼 아이콘 (Google Material icons)을 사용하는 방법입니다. 아이콘폰트가 무엇인지 궁금하면 이전에 포스팅한 아이콘 폰트(Icon font) 자유자제로 사용하기를 먼저 읽어 보시는 것을 추천합니다.

구글 머티리얼 아이콘 (Google Material icons)

tistory-image

구글 머티리얼 아이콘 홈페이지바로가기

구글에서도 머티리얼 아이콘을 무료로 사용할 수 있게 공개를 했습니다. 구글 머티리얼 아이콘은 웹폰트형식 뿐만이 아니라 안드로이드나 아이폰에서도 사용할 수 있게 SVG와 PNG 형식으로도 아이콘을 제공을 하고 있습니다.

여기서는 다른사이트와 동일하게 웹폰트형식의 아이콘 폰트를 사용할 수 있는 방법에 대해서만 설명을 하도록 하겠습니다.

설치 방법

설치는 크게 2가지로 나누어지는데.. CDN을 통해서 설치하는 방법과 아이콘 폰트를 다운로드받아서 설치하는 방법이 있습니다.

CDN 설치

가장 간단하게 사용할 수 있는 CDN설치는 특별히 아이콘을 커스터마이징 할 일이 없을 떄 사용하면 됩니다.
구글 머티리얼 아이콘의 CDN 주소를 적용하고자 하는 웹사이트의 <hrad>태그 영역에 styleseet를 불러오는 것 처럼 링크를 걸어주면 됩니다.

  1. 웹사이트의 <head> 태그영역 안에 아래의 코드를 삽입합니다.

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
**CDN이란? : ** CDN은 **C**ontent **D**elivery **N**etwork의 앞글자로 접속자가 인터넷상에서 가장 가까운 곳의 서버로 컨텐츠를 전송받아 트래픽이 특정 서버에 집중되지 않고 각 서버로 분산되도록 하는기술입니다 (구글검색)
소스제공자가 CDN을 전문으로 서비스하는 `googleCDN`이나 `BootstrapCDN`, `jsdelivrCDN`에 소스를 올려놓으면 일반사용자가 제공 되어지는 CDN의 `URL`을 링크하여 사용하는 방식으로 **오픈소스**에서 많이 활용되고 있습니다.

다운로드하여 설치

다운로드하여 사용할 경우는 폰트어썸이나, XEICON과 달리 순수하게 아이콘 폰트만 제공하기 때문에 웹폰트처럼 사용하기 위해서는 기본적인 CSS 설정을 해 주어야만 합니다.

  1. Google Material icons 사이트에서 아이콘 폰트를 다운로드 받습니다.
    > Material Icons Guide 페이지 중간 쯤에 Downloading everything 항목에서 다운로드가 가능함.

  2. 다운로드한 아이콘 폰트를 웹사이트의 적절한 위치에 저장을 합니다.

  3. CSS파일을 새로 생성하거나 기존에 있는 CSS파일을 열어서 @font-face를 아래와 같이 등록합니다.

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

  4. 해당 아이콘을 적용할 기본 material-icons CLASS를 생성해야 합니다.

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

사용 방법

사용 방법도 일일이 다 CLASS를 만들어야 합니다.

폰트어썸이나 XEIcon은 class로 설정까지 모두 제작하여 CSS파일을 제공하는 반면에 구글 머티리얼 아이콘은 그냥 순수하게 아이콘 폰트만 제공하기 때문에 여러가지 기능적으로 사용하기 위해서는 별도로 CLASS를 만들어야 합니다.

기본 적용

tistory-image

위에서 .material-icons으로 기본 CLASS를 작성했기 때문에 이 class를 적용하면 기본적인 사용이 가능합니다.

<i class="material-icons">face</i>
<i class="material-icons">&#xE87C;</i>1

class의 material-icons는 구글 머티리얼 아이콘을 사용한다는 선언입니다.
<i>택그의 class명이 아니라 내용에 아이콘명을 입력하여 아이콘의 종류를 선택할 수 있습니다.
아이콘은 구글 머티리얼 아이콘 페이지에서 아이콘명을 찾아서 적용하면 됩니다.

tistory-image

  1. 먼저 원하는 모양의 아이콘을 클릭합니다.
  2. 하단에 pull-up창이나오는데 <>ICON FONT를 클릭합니다. 아이콘 폰트를 웹폰트형식으로 사용하는 방법입니다.
  3. 3번 또는 4번의 코드를 복사해서 원하는 위치에 붙혀 넣으시면 아이콘이 표시 됩니다.
    1. STEP 2: Use Icon in Your Site에서 “3”번은 아이콘명을 보기에 쉬우나 IE10이상의 버전에서만 정상작동 합니다. (추천)
    2. “4”번 IE9이하 버전에서만 정상작동합니다.

아이콘 크기변경 (Larger Icons)

아이콘의 크기 변경이 가능하도록 CSS파일에 CLASS를 생성해애 합니다. 아래는 구글에서 샘플로 제안하는 코드입니다.

tistory-image

.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; }
<i class="material-icons md-18">face</i>
<i class="material-icons md-24">face</i>
<i class="material-icons md-36">face</i>
<i class="material-icons md-48">face</i>

아이콘 색상변경

아이콘의 색상 변경이 가능하도록 CSS파일에 CLASS를 생성해애 합니다. 아래는 구글에서 샘플로 제안하는 코드입니다.

tistory-image
tistory-image
tistory-image

.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

.material-icons.orange600 { color: #FB8C00; }
<i class="material-icons md-dark">face</i>
<i class="material-icons md-dark md-inactive">face</i>
<i class="material-icons md-light">face</i>
<i class="material-icons md-light md-inactive">face</i>
<i class="material-icons orange600">face</i>

기타 다른 CLASS는 정해져 있지 않습니다. Frontend 개발자가 CLASS를 추가로 제작해서 사용해야 하기때문에 역량에 따라 더 잘 활용할 수도 있고 기본만 사용할 수도 있습니다.

Similar Posts

  • Angular에서 사용되는 타입스크립트 문법

    By우 푸

    타입스크립트에 대한 간단한 문법을 정리하려고 합니다. 타입과 문자열 선언자 var : javascript에서 전통적으로 사용해온 선언자로 모든 타입을 허용 let : typescript에서 특화시킨 선언자로 타입을 지정해야 함 배열타입 배열의 타입을 아래와 같이 설정하며 배열에 값을 입력할때는 push()를 사용함 let fruits: string[] = [“바나나”,”사과”,”오렌지”]; let num1:Array = [1,2,3]; let num2:Array = new Array(); num2.push(1); num2.push(2); num2.push(3); 유니언타입 […]

  • 레이아웃의 다단을 100% 로 맞추기

    By우 푸

    예전에 Table로 레이아웃을 잡을 때는 어렵지 않게 구현되었던 표현인데 근래들어서 웹표준에 맞게 코딩을 하게 되면서 레이아웃을 DVI태그로 구현해야 하게 되므로써 다소 구현이 어려워진 것 중에 하나가 다단을 구성하는 것이 아닐까 합니다. 그 다단을 구현하는 방법이 여러가지가 있을 것 같은데.. 이번에 소개를 해드리는 것은 javascript로 구현하는 방법입니다. 레이아웃을 구성 시 2단 또는 3단 이상의 다단을 구성할때 […]

  • gogs로 시놀로지의 Git Server을 Github처럼 사용하는 방법

    By우 푸

    시놀로지에는 기본 패키지로 Git Server가 있습니다. 이것을 설치하고 실행을 하려면 SSH나 Telnet로 접속을 해서 CLI 명령어를 키보드로 쳐 줘야 사용할 수 있습니다. 하지만 이것에 추가로 Git Server를 Web 서비스 형태로 다룰 수 있게 해주는 추가 패키지를 설치하면 Github처럼 Web화면에서 서버를 서비스 할 수 있게 됩니다. Git Server를 Web 형식으로 다룰 수 있는 무료 소스는 여러가지가 […]

  • node.js로 Youtube 다루기

    By우 푸

    Youtube가 무엇인지는 따로 설명하지 않아도 대부분의 사람들이 알것이라고 생각합니다. 이 youtube도 구글에서 OpenAPI를 제공하고 있어서 Node.js에서 활용을 할 수 가 있습니다. 동영상을 업로드하거나 업데이트하거나 또는 검색어를 통해 리스트를 받아볼 수도 있습니다. 이런기능을 잘 활용하면 유의미한 APP을 개발할 수 있습니다. 이번 포스팅에서는 간단하게 Youtube Data API를 활용하여 원하는 검색어로 검색을 하는 일련의 과정을 작성하도록 하겠습니다. 0.1. […]

  • 반응형웹에 대한 미디어쿼리의 사용

    By우 푸

    처음에 미디어 쿼리를 디바이스별로 정리를 해볼까 하다가 새로운 디바이스가 나올때마다 해상도 파악하고 기록하고… 삽질할 것을 생각하니 엄두가 나지 않아서 범용적으로 사용할 수 있는 방법으로 정리를 해야할 것 같아 포스팅을 합니다. 그래도 먼저 디바이스별 해상도에 대해서 궁금한 사람이 있을 수 있으니 신상 디바이스까지 업데이트를 잘 해주고 있는 사이트를 2개 공유하고 넘어 갑니다. mydevice screensiz.es 기본 설정 […]

  • 아마존에서 준비중인 드론배송 특허 3가지

    By우 푸

    아마존에서 드론배송에 대한 다양한 특허를 계속적으로 신청을 하고 있습니다. 어떻게 보면 말도 안되게 병맛인 특허들도 많은데 그중에서 그래도 있으면 좋을것 같은 특허 3가지를 소개해 볼까 합니다. 드론 배송 센터 벌집을 연상시키는 모양의 드론 배송센터에 대한 특허 입니다. 이것은 장거리 배송보다는 도심지의 단거리 배송에 특화된 것이라고 할 수 있습니다. 아직까지 드론의 고질적인 문제인 짧은 배터리 성능이나 […]

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다