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>

같은 카테고리의 다른 글
안드로이드 / 앱 / 아웃룩 / 계정별로 다른 소리로 알림 받는 방법

안드로이드 / 앱 / 아웃룩 / 계정별로 다른 소리로 알림 받는 방법

아웃룩 앱에 여러 메일 계정을 등록할 수 있다. 그런 경우 불편한 것은 모두 같은 소리로 알림이 온다는 것이다. 메일 계정마다 중요도가 다른데 알림의 차이가 없으므로 무조건 보게 된다. 다행히 아웃룩 앱에는 메일 계정마다 알림 소리를 다르게 하는 기능이 있다. 아웃룩 앱을 열고 왼쪽 위에 있는 선 세 개 아이콘을 누른다. 왼쪽 아래에 있는 ...

크롬 / 비밀번호 저장 설정하는 방법

크롬 / 비밀번호 저장 설정하는 방법

구글 크롬에는 비밀번호 저장 기능이 있다. 비밀번호 저장을 하면 동기화한 모든 기기에서 저장된 암호를 사용할 수 있다. 편리하긴 하지만, 공용 PC에서는 사용에 주의를 기울여야 한다. 비밀번호 저장 기능 사용 여부는 에서 한다. 를 클릭하고... 를 클릭한다. 을 클릭한다. 비밀번호 저장 기능을 사용했다면 저장된 비밀번호 목록을 볼 수 있다. 사이트를 클릭해서 ...

엡손 프린터 / 헤드 청소하는 방법

엡손 프린터 / 헤드 청소하는 방법

집과 사무실에서 엡손 프린터를 사용하고 있다. 둘 다 무한 잉크라서 유지비는 만족하고 있는데, 오랫동안 사용하지 않거나 위치를 변경하거나 하면 인쇄 품질이 나빠진다. 둘 줄로 나오거나, 번지거나, 막히거나... 그런 경우 헤드 청소를 하면 해결된다. 엡손에서 제공해주는 기능으로, 드라이버가 제대로 설치되어 있어야 사용할 수 있다. 윈도우 10이라면... 을 연다.(단축키는 WIN+I) 를 클릭한다. 를 클릭하고, ...

줌(Zoom) / 회의 만드는 방법, 초대하는 방법, 참가하는 방법

줌(Zoom) / 회의 만드는 방법, 초대하는 방법, 참가하는 방법

회의 만들기 회의를 만드는 방법은 으로 만든다. 새 회의로 즉시 미팅 만들기 작업하는 과정에서 Zoom 앱이 필요한 경우 다운로드하고 설치하도록 유도한다. 만약 그 과정을 놓쳤다면 https://us05web.zoom.us/download에서 다운로드하고 설치한다. Zoom을 실행하고 을 클릭한다. 계정 정보를 입력하고 을 클릭한다. 를 클리하면 바로 회의가 ...

크롬 / 즐겨찾기 내보내기, 즐겨찾기 가져오기

크롬 / 즐겨찾기 내보내기, 즐겨찾기 가져오기

크롬에는 동기화 기능이 있습니다. 구글 계정으로 로그인하고 동기화 허용 설정을 하면, 클라우드에 즐겨찾기 등이 저장되고, 다른 기기에서 크롬에 로그인하면 그 정보들을 가져옵니다. 유용한 기능이기는 하나, 비밀번호 등 중요한 정보도 같이 동기화되므로 주의해서 사용해야 합니다. 만약 동기화 기능을 사용하지 않고 즐겨찾기를 백업하고 복원해야 한다면, 다음과 같은 방법으로 하면 됩니다. 크롬에서 내보낸 북마크는, 마이크로소프트 ...

위키(Wiki) / 위키 만드는 소프트웨어 / 미디어위키(MediaWiki)

미디어위키(MediaWiki)는 오픈 소스 위키 소프트웨어로, 위키백과(Wikipedia)와 같은 대규모 협업 프로젝트를 위해 설계되었습니다. PHP로 작성되었으며, MySQL 및 MariaDB를 데이터베이스로 사용합니다. 미디어위키는 다양한 기능과 확장성을 제공하여 복잡한 위키 사이트를 운영하는 데 적합합니다. 역사 미디어위키는 처음에는 위키백과 프로젝트를 지원하기 위해 개발되었습니다. 2002년, 매그너스 만스케(Magnus Manske)가 PHP로 작성한 초기 버전이 공개되었으며, 이후 개발자들이 지속적으로 기여하여 현재의 ...

OBS Studio / 설치하는 방법

OBS Studio / 설치하는 방법

OBS Studio는 영상 녹화 또는 방송을 할 수 있게 해주는 오픈소스 프로그램입니다. 주요 영상 플랫폼을 지원하고, 고화질의 녹화가 가능합니다. OBS Studio를 설치하고 기본 설정하는 방법을 알아보겠습니다. 다운로드 https://obsproject.com/ko에서 다운로드합니다. 윈도우, 맥, 리눅스를 지원합니다. 자신의 환경에 맞는 걸 다운로드하세요. 여기서는 윈도우용을 다운로드하겠습니다. 설치 다운로드한 파일을 실행하면 설치가 시작됩니다. 를 클릭합니다. 라이선스에 동의하면 를 클릭합니다. 클릭하지 않으면 진행되지 ...

버추얼박스 / 가상 머신 내보내기, 가져오기

버추얼박스 / 가상 머신 내보내기, 가져오기

버추얼박스의 가상 머신을 백업하고 복원하는 방법 중의 하나는 내보내기와 가져오기를 이용하는 것입니다. 내가 만든 가상 머신을 남에게 전달할 때도 유용한 방법입니다. 내보내기는 가상 머신의 모든 구성 요소를 하나의 파일로 만드는 것이라 파일의 크기가 상당히 큰데, SSD라면 꽤 빠른 시간에 끝납니다. 가져오기도 마찬가지입니다. 내보내기 왼쪽 위의 을 클릭합니다. 를 클릭합니다. 단축키는 Ctrl+E입니다. 내보낼 가상 ...

JPG vs PNG - 이미지 파일 형식의 비교

이미지 파일 형식은 디지털 사진과 그래픽 작업에서 매우 중요한 역할을 합니다. 가장 널리 사용되는 이미지 파일 형식 중 두 가지는 JPG(JPEG)와 PNG입니다. JPG와 PNG의 주요 특징, 장단점, 사용 사례 등을 알아보겠습니다. JPG (Joint Photographic Experts Group) 정의와 역사 JPG는 Joint Photographic Experts Group에서 개발한 손실 압축 이미지 파일 형식입니다. 1992년에 처음 도입된 이래로, ...

모니터 / FreeSync

모니터 FreeSync는 AMD가 개발한 기술로, 그래픽 카드와 모니터의 주사율을 동기화하여 화면 찢김(Tearing)과 끊김(Stuttering)을 방지하는 기능을 제공합니다. 이 기술은 주로 게임 플레이 시 보다 부드럽고 일관된 시청 경험을 제공하는 데 사용됩니다. FreeSync의 작동 원리 주사율 동기화 FreeSync는 그래픽 카드와 모니터 간의 주사율을 동기화하여 화면 찢김을 방지합니다. 화면 찢김은 그래픽 카드가 모니터의 주사율과 일치하지 않는 ...