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>

같은 카테고리의 다른 글
구글 포토 / 휴지통 비우는 방법

구글 포토 / 휴지통 비우는 방법

구글 포토에서 사진을 지우면 휴지통으로 이동합니다. 그리고 일정 기간이 지나면 완전히 삭제됩니다. 만약 지금 즉시 사진을 완전히 삭제하고 싶다면 휴지통을 비워야 합니다. 안드로이드 구글 포토에서, 그리고 웹용 구글 포토에서 휴지통 비우는 방법을 알아봅니다. 안드로이드 구글 포토 왼쪽 위의 메뉴바를 누릅니다. 을 누릅니다. 점 세 개 아이콘을 누릅니다. 를 누릅니다. 웹용 구글 포토 웹브라우저로 구글 포토에 접속합니다. 왼쪽 위에 있는 ...

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

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

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

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

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

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

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

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

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

구글 애널리틱스 / 이탈률

구글 애널리틱스(Google Analytics)에서 이탈률(Bounce Rate)은 웹사이트 방문자가 단일 페이지를 방문한 후 다른 페이지로 이동하지 않고 사이트를 떠나는 비율을 의미한다. 다시 말해, 방문자가 웹사이트의 한 페이지만 보고 나머지 페이지를 보지 않고 사이트를 떠나는 경우를 말한다. 이탈률은 다음과 같은 방식으로 계산된다. 이탈률 = ( 단일 페이지 방문 세션 수 / 전체 세션 수 ...

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

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

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

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

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

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

민원24 / 통신판매업신고하는 방법

민원24 / 통신판매업신고하는 방법

통신판매업신고 인터넷 쇼핑몰을 만들 때 통신판매업신고 면제 기준에 해당하지 않으면 통신판매업신고를 해야 합니다. 통신판매업신고 면제 기준은  최근 6개월 동안 통신판매의 거래횟수가 20회 미만인 경우 최근 6개월 동안 통신판매의 거래규모가 1200만원 미만인 경우 입니다. 따라서 쇼핑몰을 6개월 운영 후 거래횟수가 20회 이상이고 거래규모가 1200만원 이상이라면 신고를 해도 됩니다만... 통신판매업신고를 했다는 게 사이트 하단에 있지 않으면 좀 없어보이므로, 보통 ...

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

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

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

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

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

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