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>

같은 카테고리의 다른 글
구글 / 계정 삭제(회원 탈퇴) 하는 방법

구글 / 계정 삭제(회원 탈퇴) 하는 방법

구글 계정은 여러 개 만들 수 있습니다. 입력해야 하는 정보도 별로 없고, 실명 인증도 없고, 간편하게 원하는 만큼 계정을 만들 수 있습니다. 그래서 만들기는 했지만 사용하지 않는 계정이 생기기 시작합니다. 사용하지 않는다면 탈퇴하는 게 좋겠죠? 구글에서는 회원 탈퇴라는 용어를 쓰지 않고, 계정 삭제라고 합니다. 계정을 삭제하기로 했다면, 일단 백업할 데이터가 있는지 잘 ...

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

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

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

구글 애널리틱스 / GA4

구글 애널리틱스 / GA4

Google Analytics 4(GA4)는 Google이 제공하는 최신 웹 및 애플리케이션 분석 도구이다. 기존의 Universal Analytics(UA)와는 달리, GA4는 더 향상된 데이터 추적 및 분석 기능을 제공하여 사용자 행동을 보다 심층적으로 이해할 수 있도록 설계되었다. GA4는 사용자 중심의 분석, 이벤트 기반 데이터 모델, 향상된 통합 및 예측 기능을 통해 마케팅 및 비즈니스 의사 ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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