▼ 구글 머티리얼 아이콘(Google Material Icons) 보기
https://fonts.google.com/icons?selected=Material+Icons
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
▼ 적용법
1. 구글 머티리얼 아이콘 적용 HTML <head>태그 내에 아래 <link> 태그를 작성합니다.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
2. 위 HTML에 적용되는 CSS 파일 내에 @font-face와 머티리얼 클래스를 다음과 같이 작성합니다.
(reset.css 작성위치 추천)
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
3. 원하는 머티리얼 아이콘의 코드 값을 확인 후 아래와 같이 작성합니다.
* 앱 아이콘 사용의 경우 SVG 및 PNG를 직접 다운받아 사용가능합니다.
<span class="material-icons"></span>
* 더 자세한 내용은 아래 공식사이트를 참고하세요.
▼ 구글 머티리얼 아이콘 가이드 공식사이트 참고
https://developers.google.com/fonts/docs/material_icons
Material Icons Guide | Google Fonts | Google Developers
Material Icons Guide An overview of material icons—where to get them and how to integrate them with your projects. What are material icons? Material design system icons are simple, modern, friendly, and sometimes quirky. Each icon is created using our de
developers.google.com
▼ 구글 머티리얼 아이콘 웹 사용 시 호환성 정보 표
