머티리얼 아이콘(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>

같은 카테고리의 다른 글

FileZilla / FTP 클라이언트 프로그램 파일질라 사용법

FileZilla / FTP 클라이언트 프로그램 파일질라 사용법

FileZilla FTP로 파일을 웹서버에 업로드하고 다운로드 받으려면 FTP 클라이언트 프로그램이 필요합니다. FTP 클라이언트 소프트웨어로 널리 사용되는 것은 파일질라(FileZilla)입니다. Open Source로 개발되는 거라 무료로 사용할 수 있고, 기능적으로도 좋은 평가를 받고 있습니다. 특히 SSH 프로토콜로 파일을 송수신할 수 있다는 장점이 있습니다. 서버에 접속하기 FileZilla를 다운로드 받아 설치하고 실행시킵니다. 호스트와 사용자명, 비밀번호, 포트에 정보를 입력하고 [빠른 ...

다음 스마트 워크로 내 도메인 메일 주소 만드는 방법

다음 스마트 워크로 내 도메인 메일 주소 만드는 방법

도메인을 구입하고, 그 도메인으로 홈페이지나 블로그를 만들면, 메일 주소가 신경쓰이기 시작합니다. 예를 들어 도메인이 cmsfactory.net인데 대표 이메일 주소가 abc@gmail.com이라면 뭔가 없어 보이죠. admin@cmsfactory.net 같은 메일 주소가 탐나기 시작합니다. 구입한 도메인으로 메일 주소를 만들기 위해서는 메일 서버를 구축하거나 유료 서비스를 이용해야 하는데, 다음의 Daum 스마트 워크를 이용하면 비용을 들이지 않고 쉽게 만들 ...

아마존 웹 서비스 AWS / 라이트세일(Lightsail) / 우분투 서버에 PuTTY로 SSH 접속하는 방법

아마존 웹 서비스 AWS / 라이트세일(Lightsail) / 우분투 서버에 PuTTY로 SSH 접속하는 방법

아마존 라이트세일에 우분투 서버를 만들었습니다. 관리는 SSH로 접속해서 하는데, 아마존에서 제공하는 웹용 SSH를 사용할 수도 있고, 다른 SSH Client 프로그램으로 접속하여 사용할 수 있습니다. 여기서는 PuTTY로 우분투 인스턴스에 접속하는 방법을 알아보겠습니다. SSH 키 다운로드 계정에서 SSH 키 메뉴로 갑니다. 키를 다운로드합니다. PuTTY, PuTTYgen 다운로드 PuTTY와 PuTTYgen을 다운로드합니다. 인스톨러에는 다 들어있습니다. 인스톨러가 싫다면 개별적으로 다운로드할 수 있습니다. SSH 키 ...

워드프레스 무료 테마 구할 수 있는 사이트 모음

워드프레스 무료 테마 구할 수 있는 사이트 모음

워드프레스 무료 테마는 WordPress.ORG에서 구하는 것이 제일 쉽습니다. 관리자 페이지에서 설치와 업데이트를 바로 할 수 있기 때문입니다. 또다른 방법은 워드프레스 테마를 무료로 배포하는 사이트를 찾는 것입니다. 워드프레스는 세계적으로 널리 쓰이는 CMS라, 무료로 테마를 배포하는 사이트도 많습니다. 무료 테마를 사용할 때 주의할 점이 있습니다. Free이고, 바로 다운로드 받을 수 있어도, 라이센스를 다시 한번 확인하는 것이 좋습니다. ...

메가존(호스팅케이알) 도메인 기간 연장하는 방법

메가존(호스팅케이알) 도메인 기간 연장하는 방법

도메인을 호스팅케이알에서 관리하고 있습니다. 10개 정도 있는데, 대부분 다른 곳에서 구입했던 것을 기관 이전했습니다. 이유는... 그냥 저렴하기 때문입니다. 서비스 품질은 거의 비슷하다고 생각하고 있습니다. 특별한 하자 없이 더 저렴한 곳이 있다면 또 옮기겠죠. 도메인은 1년 단위로 구입하고, 갱신하지 않으면 사라집니다. 그래서 계속 도메인을 사려면 꾸준히 갱신을 해줘야 하는데, 이번에 갱신하는 김에 ...

아마존 웹 서비스 AWS / 라이트세일(Lightsail) / 우분투 / root으로 키 없이 SSH 접속하는 방법

아마존 웹 서비스 라이트세일에서 우분투 서버를 만들면, SSH 접속은 KEY를 이용해서 합니다. 보안 상 좋은 방법이라 그렇게 하겠지만, root 계정에 익숙하거나 KEY 사용이 불편하다면 설정을 변경할 수 있습니다. 다음은 root 계정으로 KEY 없이 SSH 접속이 가능하도록 만드는 방법입니다. root 계정 비밀번호 설정 root 계정의 비밀번호를 만듭니다. sudo passwd root SSH 설정 수정 /etc/ssh/sshd_config에서 PermitRootLogin prohibit-password 를 다음과 ...

Subtle Patterns / 배경에 사용하기 좋은 패턴 이미지 구할 수 있는 사이트

Subtle Patterns / 배경에 사용하기 좋은 패턴 이미지 구할 수 있는 사이트

Subtle Patterns Subtle Patterns은 웹사이트 배경에 사용하기 좋은 패턴 이미지를 공유하는 사이트입니다. 현재 400개 이상의 패턴 이미지가 있으며, 무료로 다운로드 받을 수 있습니다. 개인적 용도뿐 아니라 상업적 사용이 가능하고, 홈페이지 템플릿에 포함하여 판매할 수도 있습니다. 조건은 HTML 또는 CSS 파일에 출처를 남기는 것입니다. CSS 파일이라면 다음 코드를 추가하면 됩니다. /* Background pattern from Subtle ...

머티리얼 아이콘(Material icons) 웹폰트 - 구글이 제공하는 아이콘 폰트

머티리얼 아이콘(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 ...

아마존 웹 서비스 AWS / 라이트세일(Lightsail) 인스턴스 생성하는 방법

아마존 웹 서비스 AWS / 라이트세일(Lightsail) 인스턴스 생성하는 방법

아마존 웹 서비스의 라이트세일은 저렴한 가상 서버입니다. 하지만 소규모 홈페이지를 만들고 운영하는 데는 충분한 자원을 제공합니다. AWS에서는 가상 서버를 인스턴스라고 부르는데, 라이트세일 인스턴스를 어떻게 만드는 지 알아보겠습니다. 라이트세일 페이지로 이동 콘솔에 접속한 다음 라이트세일 페이지로 이동합니다. 솔루션 구축에 있는 메뉴를 이용해도 되고... 서비스의 하위 메뉴에서 이동해도 됩니다. 직접 접속할 수 있는 주소는 https://lightsail.aws.amazon.com입니다. 인스턴스 생성 인스턴스 위치를 ...

Google Ads / 공유 예산 설정하는 방법

Google Ads / 공유 예산 설정하는 방법

구글 애드(Google Ads)는 캠페인별로 하루 예산을 정할 수 있습니다. 하루 지출 가능한 금액을 정하는 것인데, 정확히 지키지는 않습니다. 월 평균으로 계산을 해서 예산보다 더 지출되는 경우도 있습니다. 예를 들어 하루 10,000원으로 정했다면, 월 300,000 한도로 지출을 하기에, 10,000보다 더 나가기도 합니다. 캠페인은 검색 캠페인과 디스플레이 캠페인으로 구분되는데, 한 가지 주제의 광고라 ...