Material icons / 구글이 제공하는 아이콘 폰트

Material icons

Material icons는 구글이 제공하는 아이콘 디자인 모음입니다. 800개가 넘는 아이콘이 있으며, 무료로 사용할 수 있습니다.

Feel free to use, remix, and re-share the icons in your products. The icons are available under the CC-BY license. We'd love attribution in your app's "about" screen, but it's not required. The only thing we ask is that you not re-sell the icons.

아이콘은 이미지와 폰트 두가지 방식으로 제공됩니다. 폰트를 사용하면 CSS로 색이나 크기 등을 쉽게 변경할 수 있습니다.

Material icons를 폰트 방식으로 사용하는 방법은 다음과 같습니다.

CSS 파일 연결

HTML 문서에 다음의 코드를 추가합니다.

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

아이콘 찾기

https://www.google.com/design/icons/에서 사용할 아이콘을 찾습니다. 아이콘을 선택하면 웹브라우저 하단에 관련 정보다 뜨는데, ICON FONT를 선택하면 코드가 나옵니다.

첫번째 코드를 이용하면 IE9 이하에서 제대로 나오지 않습니다. 따라서 두번째 코드를 사용하는 것이 좋습니다.

스타일링

HTML 문서 코드를 넣고, 원하는 모양으로 스타일링 합니다. 다음은 크기와 색, 배경색을 조정한 간단한 예입니다. (IE8 이하에서는 원이 아닌 사각형 모양으로 나옵니다.)

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Material Icons</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <style>
      .a { width: 300px; margin: 30px auto; padding: 75px 0px; background-color: #2196F3; border-radius: 50%; text-align: center; color: #BBDEFB; }
      .a i { font-size: 150px; }
    </style>
  </head>
  <body>
    <div class="a">
      <i class="material-icons">&#xE859;</i>
    </div>
  </body>
</html>

같은 카테고리의 다른 글
호스팅케이알 / 도메인 기간 연장하는 방법

호스팅케이알 / 도메인 기간 연장하는 방법

도메인을 사면 영구적으로 내 것이 되는 게 아니다. 일정 기간만 사용할 수 있고, 그 기간이 끝나기 전에 연장해야 한다. 기간 연장하지 않은 도메인은 다른 사람이 등록할 수 있다. 보통 도메인 등록 기관에서 기간 만료 전에 안내 메일이나 문자를 보내지만, 중요한 도메인이라면 만료일을 별도로 메모해두고 관리하는 것이 좋다. 참고로, 도메인 기간 연장은 만료일 ...

유튜브 / 채널 소유자, 관리자, 커뮤니케이션 관리자 추가하는 방법

유튜브 / 채널 소유자, 관리자, 커뮤니케이션 관리자 추가하는 방법

유튜브의 브랜드 채널은 사용자를 추가하여 여러 명이 관리할 수 있습니다. 어떻게 채널에 사용자를 추가하는지 알아보겠습니다. 소유자 또는 관리자를 추가하려는 채널에 접속합니다. 그리고 을 클릭합니다. 를 클릭합니다. 를 클릭합니다. 오른쪽 위의 사람 모양 아이콘을 클릭합니다. 추가할 사용자의 이메일 주소를 입력하고, 역할을 선택합니다. 를 클릭합니다. 초대하였다고 바로 추가되는 것은 아닙니다. 상대방의 동의가 있어야 합니다. 초대 받은 ...

Google Ads / 공유 예산 설정하는 방법

Google Ads / 공유 예산 설정하는 방법

구글 애드(Google Ads)는 캠페인별로 하루 예산을 정할 수 있습니다. 하루 지출 가능한 금액을 정하는 것인데, 정확히 지키지는 않습니다. 월 평균으로 계산을 해서 예산보다 더 지출되는 경우도 있습니다. 예를 들어 하루 10,000원으로 정했다면, 월 300,000 한도로 지출을 하기에, 10,000보다 더 나가기도 합니다. 캠페인은 검색 캠페인과 디스플레이 캠페인으로 구분되는데, 한 가지 주제의 광고라 ...

Gmail / 언어를 한국어로 설정하는 방법

Gmail / 언어를 한국어로 설정하는 방법

지메일(Gmail) 계정이 여러 개 있습니다. 한 계정에 오랜만에 로그인했는데, 언어가 영어로 되어있더군요. 앞으로 자주 사용할 거 같아 언어를 한국어로 바꾸었습니다. 오른쪽 위에 설정 아이콘을 클릭하고 를 클릭합니다. Gmail display language를 로 설정한 후... 밑으로 주욱 내려와서 를 클릭합니다. 한국어로의 변경이 완료되었습니다. 아웃룩 등 이메일 클라이언트에서도... 적용됩니다.

국민건강보험 건강검진결과 인터넷으로 조회하는 방법

국민건강보험 건강검진결과 인터넷으로 조회하는 방법

국민건강보험의 건강검진 결과는 보통 인쇄물로 받는데, 인터넷으로도 조회할 수 있다. 과거의 것도 조회가 가능하고, 주요 수치를 년도별로 비교할 수도 있다. 건강검진결과 인터넷 조회는 국민건강보험 홈페이지에서 한다. 개인 민원(민원여기요)으로 들어가면 되는데, 상단 메뉴를 이용해도 되고, 맞춤 메뉴의 를 클릭해도 된다. 로 들어간다. 민감한 개인 정보이므로 로그인이 필요하다. 적절한 방법으로 로그인한다. 아래는 간편 인증으로 ...

호스팅케이알 / 도메인 개인정보보호서비스로 개인정보 숨기는 방법

호스팅케이알 / 도메인 개인정보보호서비스로 개인정보 숨기는 방법

도메인 소유자의 정보는 WHOIS 검색을 통해 알아낼 수 있습니다. 예를 들어 네이버는... 다음과 같이 나옵니다. 회사라면 회사의 정보가 나오고, 개인이라면 개인의 정보가 나옵니다. 주소 뿐만 아니라 전화번호까지 나와서 마음에 들지 않을 수 있습니다. 만약 개인 정보가 노출되는 게 싫다면, 정보를 노출시키지 않는 부가서비스를 이용하면 됩니다. 호스팅케이알에서는 이를 도메인 개인정보보호라고 합니다. 1개월에 100원인 유료 ...

페이스북 / 페이지 / 관리자 추가하는 방법

페이스북 / 페이지 / 관리자 추가하는 방법

페이스북에서 개인이 아닌 단체로 활동하려면 페이지를 만든다. 페이지로 좋아요를 누르거나, 메시지를 보내거나, 그룹에 가입할 수 있다.(그룹에 가입하려면 해당 그룹에서 페이지 멤버를 받도록 설정이 되어있어야 한다.) 페이지는 단체이므로 여러 명이 관리하는 경우가 많은데, 계정을 공유하는 것보다는 관리자로 추가하는 게 여러모로 편하다. 페이스북에서는 이를 액세스 권한이라 하는데, 두 가지가 있다. Facebook 액세스 권한이 있는 사람 이 ...

법 / 소송 진행 과정 조회하는 방법, 판결서 조회하는 방법

법 / 소송 진행 과정 조회하는 방법, 판결서 조회하는 방법

소송 진행 과정 조회 소송이 어떻게 진행되고 있는지는 에서 확인할 수 있다. 필요한 것은 사건번호와 소송 당사자 이름. 특별한 인증 과정 없이 사건번호와 소송 당사자 이름만 알면 조회가 되는데, 그래도 되는 것인지 의아하다. 에 접속한다. 사건번호 등 정보를 입력하고 을 클릭한다. 에 전체 개요가 ...

페이스북 / 페이지 / 삭제하는 방법

페이스북 / 페이지 / 삭제하는 방법

페이지를 삭제하는 메뉴만 찾으면 삭제는 쉽게 할 수 있다. 아래의 순서대로 찾아가거나 페이지 프로파일 설정 페이지로 바로 접속해도 된다. 삭제 과정 마지막에 나오듯이 30일 내에는 복원이 가능하다. 회원님의 페이지를 영구적으로 삭제합니다. 삭제할 준비가 완료되면 페이지 삭제를 클릭하세요. 페이지 삭제를 요청한 후에는 페이지를 다시 활성화하고 삭제를 취소할 수 있는 30일의 기간이 주어집니다. 30일의 ...

구글 포토 / 콜라주 만드는 방법

구글 포토 / 콜라주 만드는 방법

콜라주는 보통 PC에서 포토스케이프로 만들어요. 화면도 크고 마우스로 조작하는 게 편해요. 불편한 건 스마트폰의 사진을 PC로 옮겨야 한다는 거에요. 사진을 대부분 폰으로 찍는데 말이죠. 그래서 콜라주를 스마트폰에서 만드는 방법을 찾아봤는데, 가까운데 있었네요. 구글 포토에서 만들 수 있습니다. 하단의 어시스턴스를 누른 후 상단에서 콜라주를 누르세요. 사진을 2-9개 선택하세요. 선택한 사진의 개수에 맞게 콜라주가 만들어져요. 필터 효과도 줄 ...