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>

같은 카테고리의 다른 글
페이스북 / 페이지 / 삭제하는 방법

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

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

마이크로소프트 계정 / 가족 구성원 추가하는 방법

마이크로소프트 계정 / 가족 구성원 추가하는 방법

가족이 모두 마이크로소프트 계정을 갖고 있다면, 가족들을 하나의 그룹으로 만들 수 있습니다. 가족 그룹으로 만들면, 노트나 일정을 공유하는 게 수월해집니다. 그리고, 컴퓨터 사용 시간 제한, 앱 사용 제한 등 자녀의 PC 사용을 제어할 수도 있습니다. 가족 그룹을 만드는 이유는, 아무래도 자녀 관리 때문이겠죠. 가족이 마이크로소프트 계정이 있다는 가정 하에서, 어떻게 가족 ...

호스팅케이알 / 네임서버, DNS 설정하는 방법

호스팅케이알 / 네임서버, DNS 설정하는 방법

웹브라우저에서 도메인을 입력하면 그 도메인의 네임서버를 찾아가고, 네임서버에서 지정한 IP로 이동하게 된다. 예전에는 도메인 등록기관에서 네임서버 관련 서비스를 제공하지 않아 별도의 네임서버가 있어야 했지만, 요즘은 대부분 무료로 DNS 서비스를 제공한다. 호스팅케이알도 마찬가지이다. 도메인의 네임서버를 호스팅케이알이 제공하는 것으로 변경하면 DNS 서비스를 이용할 수 있다. 네임서버 변경하기 호스팅케이알에 로그인하고, 를 ...

Google 애널리틱스 / GA4 / 애드센스 연결하는 방법

Google 애널리틱스 / GA4 / 애드센스 연결하는 방법

Google 애널리틱스 4(GA4) 속성에 애드센스를 연결하여, 애드센스 관리자 페이지에서는 볼 수 없는 여러 가지 통계를 볼 수 있다. 예를 들어 페이지별 수익 같은 거... 애드센스 계정과 애널리틱스 계정이 같다는 가정하에 연결하는 순서는 다음과 같다. 애드센스 관리자 페이지에서 을 클릭한다. 를 클릭한다. 연결하려는 속성을 선택하고 를 클릭한다. 완료가 ...

지메일, 네이버 메일, 다음 메일 / IMAP 사용할 수 있게 설정하는 방법

지메일, 네이버 메일, 다음 메일 / IMAP 사용할 수 있게 설정하는 방법

지메일, 네이버 메일, 다음 메일 등은 아웃룩이나 썬더버드 같은 메일 클라이언트 프로그램으로 메일을 주고 받을 수 있습니다. 메일을 받을 때 POP3 또는 IMAP 방식을 사용하는데, IMAP이 여러모로 편합니다. 메일을 보내는 것은 SMTP를 이용하구요. IMAP/SMTP를 이용하여 아웃룩 등으로 메일 송수신을 하려면 웹메일에서 IMAP을 사용할 수 있도록 설정해주어야 합니다. 메일 서비스별로 설정하는 방법을 ...

네이버 웹마스터 도구 / 사이트 등록하는 방법

네이버 웹마스터 도구 / 사이트 등록하는 방법

홈페이지나 블로그가 네이버에서 검색되도록 하기 위해서는 네이버 웹마스터 도구에 등록을 해야 한다. 네이버 웹마스터 도구 : https://searchadvisor.naver.com/console/board 네이버 계정으로 로그인해야 하고, HTML 파일을 업로드하거나 메타 태그를 추가해야 사이트 등록을 할 수 있다. 또한 RSS와 Sitemap을 등록해야 원활한 수집이 가능하다. 네이버 계정 하나에 100개의 사이트를 등록할 수 있다. 사이트 등록 사이트 URL을 입력하고 오른쪽 끝에 있는 ...

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

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

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

가비아 / DNS 관리하는 방법

가비아 / DNS 관리하는 방법

도메인으로 웹서버, 메일 서버 등을 운영한다면 도메인의 DNS에 레코드를 등록해야 한다. 가비아에서는 무료로 네임 서버와 DNS를 관리할 수 있는 툴을 제공한다. DNS를 관리하고 싶다면 My 가비아로 접속한 후 을 클릭하거나, https://dns.gabia.com/로 바로 접속하면 된다. 도메인 목록 옆에 있는 을 클릭하면... 레코드 목록이 나오고, 을 클릭하면... DNS 레코드를 추가, 수정, 삭제할 수 있는 ...

네이버 웹마스터 도구 / 소유 확인 갱신하는 방법

네이버 웹마스터 도구 / 소유 확인 갱신하는 방법

홈페이지나 블로그가 네이버에서 검색되도록 하기 위해서는 네이버 웹마스터 도구에 등록을 해야 한다. 그런데, 한 번 등록하고 끝나는 것이 아니라 1년 마다 갱신을 해야 한다. 아마도 운영되지 않는 사이트를 색인하는데 들어가는 자원을 아낄려고 하는 거 같다. 소유확인 갱신은 사이트를 처음 등록할 때와 비슷한 과정을 거친다. 사이트를 등록할 때 HTML 파일을 업로드하거나 메타 ...

마이크로소프트 회원 탈퇴(계정 삭제) 하는 방법

마이크로소프트 회원 탈퇴(계정 삭제) 하는 방법

더 이상 사용하지 않는 마이크로소프트 계정을 삭제하기로 했다. 내 계정에 들어가서 개인 정보, 보안 등 계속 회원 탈퇴 메뉴를 찾았는데, 너무 찾기 힘들다. 회원 이탈 방지를 위해서 그렇게 한 건 이해가 되는데, 해도 해도 너무한다. 만약 회원 탈퇴를 하고 싶다면, 메뉴를 탐색하지 말고, 아래 링크로 바로 접속하자. https://account.live.com/closeaccount.aspx 다음과 같은 화면이 나오고, 바로 ...