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>

같은 카테고리의 다른 글

크롬 / 포커스 모드로 주소표시줄, 즐겨찾기 안 보이게 하는 방법

크롬 / 포커스 모드로 주소표시줄, 즐겨찾기 안 보이게 하는 방법

크롬 포커스 모드는 더 이상 지원되지 않습니다. 대신 바로 가기 만들기를 이용하여 주소창을 없앨 수 있습니다. 크롬 상단에 나오는 즐겨찾기는 Ctrl+Shift+B로 안 보이게 할 수 있습니다. 다시 한 번 Ctrl+Shift+B를 누르면 다시 보이죠. 만약 주소표시줄을 없애고 싶다면 어떻게 할까요? 모든 크롬 창의 주소표시줄을 안 보이게 할 수는 없지만, Focus Mode를 이용하면 특정 탭에서는 ...

OBS Studio / 컴퓨터 화면 녹화하는 방법

OBS Studio / 컴퓨터 화면 녹화하는 방법

OBS Studio로 컴퓨터 화면을 녹화해보겠습니다. 이를 OBS Studio에서는 디스플레이 캡쳐라고 합니다. + 버튼을 클릭하고 를 클릭합니다. 이름을 적당히 정한 후 을 클릭합니다. 미리보기가 나옵니다. 만약 NVIDIA 그래픽카드를 사용하면서 화면이 검정색으로 나온다면 여기의 안내를 따라 해결하세요. 을 클릭합니다. 이제 을 누르면 해당 화면이 녹화됩니다. 을 클릭하면 녹화를 마칩니다. 기본 저장 폴더는 동영상(Videos)입니다. 녹화 관련 설정을 변경하고 ...

호스팅케이알 / DNS 설정하는 방법

호스팅케이알 / DNS 설정하는 방법

웹브라우저에서 도메인을 입력하면, 그 도메인의 네임서버에서 설정한 IP로 접속합니다. 즉, 도메인과 IP를 연결해주는 역할을 하는 게 네임서버입니다. 예전에는 도메인 등록기관에서 네임서버 관련 서비스를 제공하지 않아 별도의 네임서버가 있어야 했지만, 요즘은 대부분 무료로 DNS 서비스를 제공합니다. 호스팅케이알도 마찬가지입니다. 호스팅케이알에서 어떻게 DNS 설정을 하는지 알아보겠습니다. 호스팅케이알에 접속하고 로그인합니다. 상단의 를 클릭합니다. DNS 설정을 ...

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 ...

KT 공유기 / GiGA WiFi Wave 2 / 초기화하는 방법

KT 공유기 / GiGA WiFi Wave 2 / 초기화하는 방법

KT 공유기를 사용하고 있습니다. 겉면에 GiGA WiFi Wave 2라고 써있네요. 장기고객 혜택이었는지 결합할인 때문이었는지는 기억이 나지 않지만, 공짜로 사용하고 있습니다. 오랫동안 사용해서인지 작동하는 게 좀 이상해져서 초기화를 했습니다. 방법은 간단한데, 모든 설정이 사라지므로 중요한 설정은 메모해두는 것이 좋습니다. KT 공유기 옆면에 초기화 버튼이 있습니다. 펜 같은 걸로 꾸욱 누르고 잠시 기다랍니다. 전면에 LED가 ...

원노트 / 메뉴에서 할 일 태그 위치 변경

원노트 / 메뉴에서 할 일 태그 위치 변경

할 일 태그는 순서 없는 목록이나 순서 있는 목록을 만드는 버튼 옆에서 만들 수 있었는데, 업데이트가 되면서 위치가 바뀌었습니다. 오른쪽 끝의 하위 메뉴로 들어갔습니다.

PuTTY / 사용법 / 백업하는 방법, 복원하는 방법

PuTTY / 사용법 / 백업하는 방법, 복원하는 방법

PuTTY는 널리 사용되는 무료 SSH 클라이언트 프로그램입니다. 많은 기능을 포함하고 있어 사용에 문제는 없는데, 한 가지 아쉬운 점은 설정을 백업, 복원하는 기능이 없다는 것입니다. 하지만, 다른 방법으로 백업과 복원이 가능합니다. 바로 레지스트리를 이용하는 것입니다. PuTTY 백업 WIN+R을 눌러 실행 창을 엽니다. regedit을 입력하고 을 클릭합니다. 왼쪽을 확장하면서 \HKEY_CURRENT_USER\SOFTWARE\SimonTatham로 찾아 들어갑니다. 마우스 우클릭 후 를 클릭합니다. 파일 이름을 ...

페이팔 / 카카오뱅크 연결하는 방법

페이팔 / 카카오뱅크 연결하는 방법

최근 환율이 많이 올랐다. 그래서 페이팔에 있는 달러를 원화로 이체하기로 했다. 예전에 우리은행과 국민은행을 연결해두었는데, 최근에는 카카오뱅크를 주로 사용해서 카카오뱅크를 추가하고 이체하기로 정했다. 일단 할 것은 카카오뱅크를 페이팔 지갑에 추가하는 것인데... 많이 편해졌다. 은행계좌 연결에서 ka라고 치면... KAKAOBANK가 바로 나온다. KAKAOBANK를 선택하고... 계좌 유형을 예금으로 선택한 후, 계좌번호는 숫자만 넣는다. 동의 후 연결을 클릭하면 연결 ...

phpMyAdmin / 이제 설정 파일은 암호화 문자열(blowfish_secret)을 필요로 합니다.

phpMyAdmin / 이제 설정 파일은 암호화 문자열(blowfish_secret)을 필요로 합니다.

phpMyAdmin을 업로드 하고 로그인 했을 때 다음과 같은 문구가 나오는 경우가 있습니다. 이제 설정 파일은 암호화 문자열(blowfish_secret)을 필요로 합니다. 해결하는 방법은 다음과 같습니다. phpMyAdmin 디렉토리에 있는 config.sample.inc.php를 config.inc.php로 이름을 바꾸어 저장합니다. 그리고 파일에 있는 다음 코드에 값을 채웁니다. $cfg = ''; 32개 보다 적은 문자를 넣으면 길이가 짧다는 메시지가 나오므로, 32개 이상의 문자를 입력합니다.

스팀 / 라이브러리(게임 설치 폴더) 추가하는 방법

스팀 / 라이브러리(게임 설치 폴더) 추가하는 방법

아무래도 SSD가 비싸다보니 C 드라이브의 용량이 크지 않다. 사무용으로 쓸 때는 괜찮은데, 개발이나 게임을 하면 용량의 한계를 느낀다. 특히 요즘 게임은 수십 GB는 족히 넘는다. 용량이 부족하면 SSD를 하나 더 사서 장착하면 되는데, 프로그램 설치를 새로운 드라이브에 하려면 설치 과정에서 설치 위치를 바꾸어주어야 한다. 그렇다면 스팀 게임은 어떻게 설치 경로를 변경할까? 왼쪽 위에 ...