Material icons / 구글이 제공하는 아이콘 폰트
Created 2015-05-21
Last Modified 2022-10-12
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"></i> </div> </body> </html>