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>

같은 카테고리의 다른 글
PuTTY / 사용법 / SSH / 자동 로그인하는 방법

PuTTY / 사용법 / SSH / 자동 로그인하는 방법

PuTTY로 리눅스 서버에 접속할 때 사용자 이름과 비밀번호를 입력합니다. 그 과정이 번거롭다면 Key를 이용하여 자동으로 로그인하도록 만들 수 있습니다. 그 방법을 정리합니다. 서버에서 Key 생성 서버에 root으로 로그인했고, 현재 디렉토리는 /root이라고 가정합니다. 다음과 같이 명령하여 Key를 생성합니다. 몇 가지 질문을 하는데 계속 엔터를 치면 됩니다. ssh-keygen .ssh 디렉토리로 이동합니다. cd .ssh id_rsa와 id_rsa.pub 두 개의 파일이 있습니다. id_rsa.pub 파일의 ...

네트워크 / 네임서버

네임서버(Name Server)는 도메인 네임 시스템(DNS, Domain Name System)의 핵심 구성 요소로, 도메인 이름과 IP 주소를 연결해주는 역할을 합니다. 네임서버는 인터넷이 현재와 같은 방식으로 작동할 수 있도록 하는 중요한 인프라 중 하나로, 사용자가 웹사이트에 접속할 때 웹 브라우저가 도메인 이름을 입력하면 해당 도메인 이름을 IP 주소로 변환해주는 기능을 수행합니다. 도메인 네임 시스템(DNS)의 ...

스토리지 / SAN / iSCSI / 특징, 장점

스토리지 / SAN / iSCSI / 특징, 장점

현대 데이터 센터와 기업 환경에서 스토리지 솔루션은 그 어느 때보다 중요해지고 있습니다. 데이터 양은 기하급수적으로 증가하고 있으며, 이에 따른 저장 및 관리의 필요성도 함께 증가하고 있습니다. 이러한 환경에서 iSCSI(Internet Small Computer Systems Interface)는 매우 유용하고 비용 효율적인 스토리지 솔루션으로 자리잡고 있습니다. iSCSI란? iSCSI는 IP 네트워크를 통해 데이터 저장 장치에 액세스하기 위해 사용하는 ...

안드로이드 / 앱 / 카카오톡 / 채팅방 알림 끄는 방법

안드로이드 / 앱 / 카카오톡 / 채팅방 알림 끄는 방법

카카오톡 채팅 방에는 알림을 끄는 기능이 있다. 그런데, 분명 알림을 껐는데도 계속 알림이 온다. 이유는 전체 설정이 알림 설정 여부와 상관없이 모든 알림을 받는 것이기 때문이다. 이 설정까지 바꿔야 원치 않는 알림을 안 받을 수 있다. 으로 간다. 으로 설정을 변경한다.

안드로이드 / 앱 / 카카오뱅크 / 지문으로 이체, 로그인 가능하게 등록, 설정하는 방법

안드로이드 / 앱 / 카카오뱅크 / 지문으로 이체, 로그인 가능하게 등록, 설정하는 방법

스마트폰이나 스마트폰 앱에 로그인할 때 지문을 사용하면 상당히 편합니다. 비밀번호나 패턴보다 보안 측면에서 좋은지는 잘 모르겠지만, 편한 건 맞습니다. 지문 사용이 가능한 스마트폰이라면 카카오뱅크도 지문으로 본인 인증이 가능합니다. 카카오뱅크 앱을 설치할 때 설정할 수 있는데, 그 때 사용 설정을 하지 않아도 변경이 가능합니다. 카카오뱅크 앱을 실행하고, 왼쪽 위에 있는 선 세 개 ...

DP(DisplayPort) / 버전별 기능 비교

DisplayPort는 고화질 영상과 오디오를 전송하는 데 사용되는 디지털 디스플레이 인터페이스입니다. 다양한 버전의 DisplayPort가 있으며, 각 버전은 더 높은 해상도와 대역폭, 추가 기능을 제공합니다. DisplayPort 1.0 / 1.1 출시 : 2006년 (1.0), 2007년 (1.1) 최대 해상도 및 주사율 : 2560x1600 @ 60Hz 대역폭 : 8.64 Gbps (전송 속도) 기능 : 기본적인 영상과 오디오 전송 지원, 2미터의 ...

모니터 / 색 영역 / DCI-P3

DCI-P3는 디지털 시네마 이니셔티브(Digital Cinema Initiatives)에서 정의한 색 공간으로, 영화 산업에서 널리 사용됩니다. DCI-P3 색 공간은 sRGB보다 더 넓은 색 영역을 포함하여, 더 풍부하고 생생한 색상을 표현할 수 있습니다. 최근에는 고급 모니터와 TV에서도 DCI-P3 색 공간을 지원하여 더 뛰어난 색 재현성을 제공합니다. DCI-P3 색 공간 정의 DCI-P3는 디지털 영화 프로젝트를 위해 만들어진 색 ...

모니터 / 패널 / IPS 패널

IPS(인플레인 스위칭, In-Plane Switching) 패널은 디스플레이 기술의 하나로, 액정 디스플레이(LCD) 기술의 한 종류입니다. IPS 패널은 주로 뛰어난 색 재현성과 넓은 시야각을 제공하는 것으로 알려져 있습니다. IPS 패널의 특징 넓은 시야각 IPS 패널은 수평 및 수직 시야각이 178도에 이를 정도로 넓습니다. 즉, 어느 각도에서 보더라도 색상이 왜곡되지 않고 선명하게 보입니다. 이는 여러 사람이 함께 ...

HP 노트북 / BIOS에서 펑션키 사용 해제 하는 방법

HP 노트북 / BIOS에서 펑션키 사용 해제 하는 방법

가끔 사용하는 구형 HP 노트북이 있다. 사양이 좋지 않아서 윈도우와 꼭 필요한 소프트웨어만 설치해서 사용한다. HP에서 제공하는 각종 유틸리티도 설치하지 않았다. 그래서 펑션키(Function Key) 사용 여부를 소프트웨어로 제어할 수 없다. 이런 경우 BIOS에서 설정을 변경하여 펑션키 사용을 해제할 수 있다. 부팅할 때 ESC 키를 누르면 다음과 같은 화면이 나온다. F10을 눌러서 BIOS Setup으로 ...

PhotoScape X / 윈도우에서 포토스케이프 X 설치하는 방법

PhotoScape X / 윈도우에서 포토스케이프 X 설치하는 방법

사진 편집 프로그램을 찾고 있다면 PhotoScape X(포토스케이프 X)는 한 번쯤 사용해 볼 만한 무료 이미지 편집 프로그램입니다. 포토스케이프는 사진 보정, 이미지 크기 변경, 자르기, 콜라주 만들기, 이어붙이기, GIF 만들기, 워터마크 넣기 등 다양한 기능을 제공하는 프로그램으로, 초보자도 비교적 쉽게 사용할 수 있다는 장점이 있습니다. 특히 블로그를 운영하거나 쇼핑몰 상품 이미지를 정리해야 ...