웹 아이콘-퀵 가이드

아이콘은 웹 페이지에서 특정 작업이나 기능을 나타내는 데 사용되는 기호입니다. 아이콘은 문서와 응용 프로그램에서 사용되며 선택 가능하거나 선택 불가능할 수 있습니다. 예를 들어 응용 프로그램의 버튼에 표시되는 이미지는 모두 아이콘이며 이러한 버튼을 선택할 수 있습니다. 마찬가지로 회사 로고로 아이콘을 사용하는 경우 일반적으로 선택할 수 없습니다.

Windows 환경에서 시스템 볼륨을 음소거하면 아래와 같이 아이콘으로 표시됩니다.

웹 아이콘을 사용하여 로딩 페이지, 비활성화 된 옵션, 링크, 리디렉션 등을 나타낼 수 있습니다. 이러한 아이콘은 뒤집기, 회전, 크기 조정, 테두리, 반전 및 색상을 지정할 수 있습니다.

아이콘 글꼴

아이콘 글꼴에는 기호와 글리프가 포함됩니다. 원하는 글꼴을로드하면 아이콘의 클래스 이름을 사용하여 해당 글꼴에서 제공하는 아이콘을 사용할 수 있습니다. 아이콘에 다른 색상을 적용하고 CSS 속성을 사용하여 크기를 조정할 수도 있습니다. 아이콘을 제공하는 아이콘 라이브러리 (글꼴)가 여러 개 있습니다. 이 튜토리얼은 세 가지 주요 글꼴에 중점을 둡니다.

멋진 글꼴
부트 스트랩 글 리피 콘
구글의 머티리얼 아이콘

멋진 글꼴

이 글꼴은 519 개의 무료 확장 가능한 벡터 아이콘을 제공합니다. 이 라이브러리는 개인용 및 상업용으로 완전히 무료입니다. 이러한 아이콘은 쉽게 사용자 정의 할 수 있습니다. 원래는 Bootstrap 용으로 개발되었습니다.

부트 스트랩 글 리피 콘

래스터 이미지 형식, 벡터 이미지 형식 및 글꼴로 사용할 수있는 단색 아이콘 라이브러리입니다. 250 개 이상의 글리프를 글꼴 형식으로 제공합니다. 웹 프로젝트에서 이러한 글꼴을 사용할 수 있습니다. 이 아이콘은 무료는 아니지만 구매하지 않고도 Bootstrap 기반 프로젝트에서 사용할 수 있습니다.

구글의 머티리얼 아이콘

Google은 '소재 디자인 가이드 라인'에 따라 디자인 된 약 750 개의 아이콘을 제공하며 Material Design아이콘. 이 아이콘은 간단하며 모든 최신 웹 브라우저를 지원합니다. 이러한 아이콘은 벡터 기반이므로 확장 가능합니다. 이 아이콘을 사용하려면 글꼴 (라이브러리)을로드해야합니다.material-icons.

Font Awesome 아이콘 라이브러리는 519 개의 무료 확장 가능한 벡터 아이콘을 제공합니다. 이 라이브러리는 개인 및 상업용으로 완전히 무료입니다. 원래 Bootstrap 용으로 설계된이 아이콘은 쉽게 사용자 정의 할 수 있습니다.

글꼴 라이브러리로드

Font Awesome 라이브러리를로드하려면 웹 페이지의 <head> 섹션에 다음 줄을 복사하여 붙여 넣습니다.

<head>
   <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
</head>

아이콘 사용

Font Awesome은 여러 아이콘을 제공합니다. 그중 하나를 선택하고 <body> 태그 내의 HTML 요소에 아이콘 클래스 이름을 추가하십시오. 다음 예에서는 인도 통화 아이콘을 사용했습니다.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
   </head>
	
   <body>
      <i class = "fa fa-inr"></i>
   </body>
	
</html>

다음 출력을 생성합니다-

크기 정의

아래와 같이 CSS를 사용하여 크기를 정의하고 클래스 이름과 함께 사용하여 아이콘의 크기를 늘리거나 줄일 수 있습니다. 주어진 예에서 우리는 크기를 6 em으로 선언했습니다.

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.mysize {font-size: 10em;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr mysize"></i>
   </body>
	
</html>

다음 출력을 생성합니다-

색상 정의

크기와 마찬가지로 CSS를 사용하여 아이콘의 색상을 정의 할 수 있습니다. 다음 예는 인도 통화 아이콘의 색상을 변경하는 방법을 보여줍니다.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.custom {font-size: 6em; color: red;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr custom"></i>
   </body>
	
</html>

카테고리 목록

Font Awesome은 다음 카테고리에서 519 개의 아이콘을 제공합니다.

웹 애플리케이션 아이콘
손 아이콘
교통 아이콘
성별 아이콘
파일 유형 아이콘
스피너 아이콘
양식 제어 아이콘
결제 아이콘
차트 아이콘
통화 아이콘
텍스트 편집기 아이콘
방향 아이콘
비디오 플레이어 아이콘
브랜드 아이콘

이러한 아이콘을 사용하려면이 장에 제공된 프로그램의 클래스 이름을 원하는 아이콘의 클래스 이름으로 바꿔야합니다. 이 단원 (Font Awesome)의 다음 장에서는 다양한 Font Awesome 아이콘의 사용법과 각 출력에 대해 범주별로 설명했습니다.

이 장에서는 Font Awesome 웹 응용 프로그램 아이콘의 사용법에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예에서와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

다음 표는 Font Awesome Web Application 아이콘의 사용법과 결과를 보여줍니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	결과
<i class = "fa fa-adjust custom"> </ i>
<i class = "fa fa-anchor custom"> </ i>
<i class = "fa fa-archive custom"> </ i>
<i class = "fa fa-area-chart custom"> </ i>
<i class = "fa fa-arrows custom"> </ i>
<i class = "fa fa-arrows-h custom"> </ i>
<i class = "fa fa-arrows-v custom"> </ i>
<i class = "fa fa-asterisk custom"> </ i>
<i class = "fa fa-at custom"> </ i>
<i class = "fa fa-automobile custom"> </ i>
<i class = "fa fa-balance-scale custom"> </ i>
<i class = "fa fa-ban custom"> </ i>
<i class = "fa fa-bank custom"> </ i>
<i class = "fa fa-bar-chart custom"> </ i>
<i class = "fa fa-bar-chart-o custom"> </ i>
<i class = "fa fa-barcode custom"> </ i>
<i class = "fa fa-bars custom"> </ i>
<i class = "fa fa-bed custom"> </ i>
<i class = "fa fa-beer custom"> </ i>
<i class = "fa fa-bell custom"> </ i>
<i class = "fa fa-wrench custom"> </ i>
<i class = "fa fa-bell-o custom"> </ i>
<i class = "fa fa-bell-slash custom"> </ i>
<i class = "fa fa-bell-slash-o custom"> </ i>
<i class = "fa fa-bicycle custom"> </ i>
<i class = "fa fa-battery-0 custom"> </ i>
<i class = "fa fa-battery-1 custom"> </ i>
<i class = "fa fa-battery-2 custom"> </ i>
<i class = "fa fa-battery-3 custom"> </ i>
<i class = "fa fa-battery-4 custom"> </ i>
<i class = "fa fa-battery-empty custom"> </ i>
<i class = "fa fa-battery-quarter custom"> </ i>
<i class = "fa fa-battery-half custom"> </ i>
<i class = "fa fa-battery-three-quarters custom"> </ i>
<i class = "fa fa-battery-full custom"> </ i>
<i class = "fa fa-birthday-cake custom"> </ i>
<i class = "fa fa-bolt custom"> </ i>
<i class = "fa fa-bomb custom"> </ i>
<i class = "fa fa-book custom"> </ i>
<i class = "fa fa-bookmark custom"> </ i>
<i class = "fa fa-bookmark-o custom"> </ i>
<i class = "fa fa-briefcase custom"> </ i>
<i class = "fa fa-bug custom"> </ i>
<i class = "fa fa-building custom"> </ i>
<i class = "fa fa-building-o custom"> </ i>
<i class = "fa fa-bullhorn custom"> </ i>
<i class = "fa fa-bullseye custom"> </ i>
<i class = "fa fa-bus custom"> </ i>
<i class = "fa fa-cab custom"> </ i>
<i class = "fa fa-video-camera custom"> </ i>
<i class = "fa fa-calendar custom"> </ i>
<i class = "fa fa-calendar-check-o custom"> </ i>
<i class = "fa fa-calendar-minus-o custom"> </ i>
<i class = "fa fa-calendar-o custom"> </ i>
<i class = "fa fa-calendar-plus-o 사용자 지정"> </ i>
<i class = "fa fa-calendar-times-o custom"> </ i>
<i class = "fa fa-camera custom"> </ i>
<i class = "fa fa-camera-retro custom"> </ i>
<i class = "fa fa-car custom"> </ i>
<i class = "fa fa-cc custom"> </ i>
<i class = "fa fa-caret-square-o-down custom"> </ i>
<i class = "fa fa-caret-square-o-left custom"> </ i>
<i class = "fa fa-caret-square-o-right custom"> </ i>
<i class = "fa fa-caret-square-o-up custom"> </ i>
<i class = "fa fa-cart-arrow-down custom"> </ i>
<i class = "fa fa-cart-plus custom"> </ i>
<i class = "fa fa-certificate custom"> </ i>
<i class = "fa fa-child custom"> </ i>
<i class = "fa fa-check custom"> </ i>
<i class = "fa fa-check-circle custom"> </ i>
<i class = "fa fa-check-circle-o custom"> </ i>
<i class = "fa fa-check-square custom"> </ i>
<i class = "fa fa-check-square-o custom"> </ i>
<i class = "fa fa-circle custom"> </ i>
<i class = "fa fa-circle-o custom"> </ i>
<i class = "fa fa-circle-o-notch custom"> </ i>
<i class = "fa fa-circle-thin custom"> </ i>
<i class = "fa fa-clock-o custom"> </ i>
<i class = "fa fa-clone custom"> </ i>
<i class = "fa fa-close custom"> </ i>
<i class = "fa fa-anchor custom"> </ i>
<i class = "fa fa-cloud-download custom"> </ i>
<i class = "fa fa-cloud-upload custom"> </ i>
<i class = "fa fa-code custom"> </ i>
<i class = "fa fa-code-fork custom"> </ i>
<i class = "fa fa-coffee custom"> </ i>
<i class = "fa fa-cog custom"> </ i>
<i class = "fa fa-cogs custom"> </ i>
<i class = "fa fa-comment custom"> </ i>
<i class = "fa fa-comment-o custom"> </ i>
<i class = "fa fa-commenting custom"> </ i>
<i class = "fa fa-commenting-o custom"> </ i>
<i class = "fa fa-comments custom"> </ i>
<i class = "fa fa-comments-o custom"> </ i>
<i class = "fa fa-compass custom"> </ i>
<i class = "fa fa-copyright custom"> </ i>
<i class = "fa fa-creative-commons custom"> </ i>
<i class = "fa fa-credit-card custom"> </ i>
<i class = "fa fa-crop custom"> </ i>
<i class = "fa fa-crosshairs custom"> </ i>
<i class = "fa fa-cube custom"> </ i>
<i class = "fa fa-cubes custom"> </ i>
<i class = "fa fa-cutlery custom"> </ i>
<i class = "fa fa-dashboard custom"> </ i>
<i class = "fa fa-database custom"> </ i>
<i class = "fa fa-desktop custom"> </ i>
<i class = "fa fa-diamond custom"> </ i>
<i class = "fa fa-dot-circle-o custom"> </ i>
<i class = "fa fa-download custom"> </ i>
<i class = "fa fa-edit custom"> </ i>
<i class = "fa fa-ellipsis-h custom"> </ i>
<i class = "fa fa-ellipsis-v custom"> </ i>
<i class = "fa fa-envelope custom"> </ i>
<i class = "fa fa-envelope-o custom"> </ i>
<i class = "fa fa-envelope-square custom"> </ i>
<i class = "fa fa-eraser custom"> </ i>
<i class = "fa fa-exchange custom"> </ i>
<i class = "fa fa-exclamation custom"> </ i>
<i class = "fa fa-exclamation-circle custom"> </ i>
<i class = "fa fa-exclamation-triangle custom"> </ i>
<i class = "fa fa-external-link custom"> </ i>
<i class = "fa fa-external-link-square 사용자 지정"> </ i>
<i class = "fa fa-eye custom"> </ i>
<i class = "fa fa-eye-slash custom"> </ i>
<i class = "fa fa-eyedropper custom"> </ i>
<i class = "fa fa-fax custom"> </ i>
<i class = "fa fa-feed custom"> </ i>
<i class = "fa fa-female custom"> </ i>
<i class = "fa fa-fighter-jet custom"> </ i>
<i class = "fa fa-file-archive-o 사용자 지정"> </ i>
<i class = "fa fa-file-audio-o custom"> </ i>
<i class = "fa fa-file-code-o custom"> </ i>
<i class = "fa fa-file-excel-o custom"> </ i>
<i class = "fa fa-volume-down custom"> </ i>
<i class = "fa fa-file-movie-o custom"> </ i>
<i class = "fa fa-file-pdf-o custom"> </ i>
<i class = "fa fa-file-photo-o custom"> </ i>
<i class = "fa fa-file-picture-o custom"> </ i>
<i class = "fa fa-file-powerpoint-o custom"> </ i>
<i class = "fa fa-file-sound-o 사용자 지정"> </ i>
<i class = "fa fa-file-video-o custom"> </ i>
<i class = "fa fa-file-word-o custom"> </ i>
<i class = "fa fa-file-sound-o 사용자 지정"> </ i>
<i class = "fa fa-file-video-o custom"> </ i>
<i class = "fa fa-file-word-o custom"> </ i>
<i class = "fa fa-file-zip-o custom"> </ i>
<i class = "fa fa-film custom"> </ i>
<i class = "fa fa-filter custom"> </ i>
<i class = "fa fa-fire custom"> </ i>
<i class = "fa fa-fire-extinguisher custom"> </ i>
<i class = "fa fa-flag custom"> </ i>
<i class = "fa fa-flag-checkered custom"> </ i>
<i class = "fa fa-flag-o custom"> </ i>
<i class = "fa fa-flash custom"> </ i>
<i class = "fa fa-flask custom"> </ i>
<i class = "fa fa-flask custom"> </ i>
<i class = "fa fa-folder custom"> </ i>
<i class = "fa fa-folder-o custom"> </ i>
<i class = "fa fa-folder-open custom"> </ i>
<i class = "fa fa-folder-open-o custom"> </ i>
<i class = "fa fa-frown-o custom"> </ i>
<i class = "fa fa-volume-off custom"> </ i>
<i class = "fa fa-gamepad custom"> </ i>
<i class = "fa fa-gavel custom"> </ i>
<i class = "fa fa-gear custom"> </ i>
<i class = "fa fa-gears custom"> </ i>
<i class = "fa fa-gift custom"> </ i>
<i class = "fa fa-glass custom"> </ i>
<i class = "fa fa-globe custom"> </ i>
<i class = "fa fa-graduation-cap custom"> </ i>
<i class = "fa fa-group custom"> </ i>
<i class = "fa fa-hand-grab-o custom"> </ i>
<i class = "fa fa-hand-lizard-o custom"> </ i>
<i class = "fa fa-hand-paper-o custom"> </ i>
<i class = "fa fa-hand-peace-o custom"> </ i>
<i class = "fa fa-hand-pointer-o custom"> </ i>
<i class = "fa fa-hand-rock-o custom"> </ i>
<i class = "fa fa-hand-scissors-o custom"> </ i>
<i class = "fa fa-hand-spock-o custom"> </ i>
<i class = "fa fa-hand-paper-o custom"> </ i>
<i class = "fa fa-hdd-o custom"> </ i>
<i class = "fa fa-headphones custom"> </ i>
<i class = "fa fa-heart custom"> </ i>
<i class = "fa fa-heart-o custom"> </ i>
<i class = "fa fa-heartbeat custom"> </ i>
<i class = "fa fa-history custom"> </ i>
<i class = "fa fa-home custom"> </ i>
<i class = "fa fa-hotel custom"> </ i>
<i class = "fa fa-hourglass custom"> </ i>
<i class = "fa fa-hourglass-start custom"> </ i>
<i class = "fa fa-hourglass-half custom"> </ i>
<i class = "fa fa-hourglass-end custom"> </ i>
<i class = "fa fa-i-cursor custom"> </ i>
<i class = "fa fa-image custom"> </ i>
<i class = "fa fa-inbox custom"> </ i>
<i class = "fa fa-industry custom"> </ i>
<i class = "fa fa-info custom"> </ i>
<i class = "fa fa-info-circle custom"> </ i>
<i class = "fa fa-institution custom"> </ i>
<i class = "fa fa-key custom"> </ i>
<i class = "fa fa-keyboard-o custom"> </ i>
<i class = "fa fa-language custom"> </ i>
<i class = "fa fa-laptop custom"> </ i>
<i class = "fa fa-leaf custom"> </ i>
<i class = "fa fa-legal custom"> </ i>
<i class = "fa fa-lemon-o custom"> </ i>
<i class = "fa fa-level-down custom"> </ i>
<i class = "fa fa-level-up custom"> </ i>
<i class = "fa fa-life-bouy custom"> </ i>
<i class = "fa fa-life-ring custom"> </ i>
<i class = "fa fa-life-saver custom"> </ i>
<i class = "fa fa-lightbulb-o custom"> </ i>
<i class = "fa fa-line-chart custom"> </ i>
<i class = "fa fa-location-arrow custom"> </ i>
<i class = "fa fa-lock custom"> </ i>
<i class = "fa fa-magic custom"> </ i>
<i class = "fa fa-magnet custom"> </ i>
<i class = "fa fa-mail-forward custom"> </ i>
<i class = "fa fa-mail-reply custom"> </ i>
<i class = "fa fa-mail-reply-all custom"> </ i>
<i class = "fa fa-male custom"> </ i>
<i class = "fa fa-map custom"> </ i>
<i class = "fa fa-map-marker custom"> </ i>
<i class = "fa fa-map-o custom"> </ i>
<i class = "fa fa-map-pin custom"> </ i>
<i class = "fa fa-map-signs custom"> </ i>
<i class = "fa fa-meh-o custom"> </ i>
<i class = "fa fa-microphone custom"> </ i>
<i class = "fa fa-microphone-slash custom"> </ i>
<i class = "fa fa-minus custom"> </ i>
<i class = "fa fa-minus-circle custom"> </ i>
<i class = "fa fa-minus-square custom"> </ i>
<i class = "fa fa-minus-square-o custom"> </ i>
<i class = "fa fa-mobile custom"> </ i>
<i class = "fa fa-money custom"> </ i>
<i class = "fa fa-moon-o custom"> </ i>
<i class = "fa fa-mortar-board custom"> </ i>
<i class = "fa fa-motorcycle custom"> </ i>
<i class = "fa fa-mouse-pointer custom"> </ i>
<i class = "fa fa-music custom"> </ i>
<i class = "fa fa-users custom"> </ i>
<i class = "fa fa-object-group custom"> </ i>
<i class = "fa fa-object-ungroup custom"> </ i>
<i class = "fa fa-paint-brush custom"> </ i>
<i class = "fa fa-paper-plane custom"> </ i>
<i class = "fa fa-paper-plane-o custom"> </ i>
<i class = "fa fa-paw custom"> </ i>
<i class = "fa fa-pencil custom"> </ i>
<i class = "fa fa-pencil-square custom"> </ i>
<i class = "fa fa-pencil-square-o custom"> </ i>
<i class = "fa fa-phone custom"> </ i>
<i class = "fa fa-phone custom"> </ i>
<i class = "fa fa-photo custom"> </ i>
<i class = "fa fa-picture-o custom"> </ i>
<i class = "fa fa-pie-chart custom"> </ i>
<i class = "fa fa-plane custom"> </ i>
<i class = "fa fa-volume-up custom"> </ i>
<i class = "fa fa-plus custom"> </ i>
<i class = "fa fa-plus-circle custom"> </ i>
<i class = "fa fa-plus-square custom"> </ i>
<i class = "fa fa-plus-square-o custom"> </ i>
<i class = "fa fa-power-off custom"> </ i>
<i class = "fa fa-print custom"> </ i>
<i class = "fa fa-puzzle-piece custom"> </ i>
<i class = "fa fa-qrcode custom"> </ i>
<i class = "fa fa-question custom"> </ i>
<i class = "fa fa-question-circle custom"> </ i>
<i class = "fa fa-quote-left custom"> </ i>
<i class = "fa fa-quote-right custom"> </ i>
<i class = "fa fa-random custom"> </ i>
<i class = "fa fa-recycle custom"> </ i>
<i class = "fa fa-refresh custom"> </ i>
<i class = "fa fa-registered custom"> </ i>
<i class = "fa fa-remove custom"> </ i>
<i class = "fa fa-reorder custom"> </ i>
<i class = "fa fa-reply custom"> </ i>
<i class = "fa fa-reply-all custom"> </ i>
<i class = "fa fa-retweet custom"> </ i>
<i class = "fa fa-road custom"> </ i>
<i class = "fa fa-anchor custom"> </ i>
<i class = "fa fa-rss custom"> </ i>
<i class = "fa fa-rss-square custom"> </ i>
<i class = "fa fa-search custom"> </ i>
<i class = "fa fa-search-minus custom"> </ i>
<i class = "fa fa-search-plus custom"> </ i>
<i class = "fa fa-send custom"> </ i>
<i class = "fa fa-send-o custom"> </ i>
<i class = "fa fa-server custom"> </ i>
<i class = "fa fa-share custom"> </ i>
<i class = "fa fa-share-alt custom"> </ i>
<i class = "fa fa-share-alt-square custom"> </ i>
<i class = "fa fa-share-alt-o custom"> </ i>
<i class = "fa fa-shield custom"> </ i>
<i class = "fa fa-ship custom"> </ i>
<i class = "fa fa-shopping-cart custom"> </ i>
<i class = "fa fa-sign-in custom"> </ i>
<i class = "fa fa-sign-out custom"> </ i>
<i class = "fa fa-signal custom"> </ i>
<i class = "fa fa-sitemap custom"> </ i>
<i class = "fa fa-sliders custom"> </ i>
<i class = "fa fa-smile-o custom"> </ i>
<i class = "fa fa-warning custom"> </ i>
<i class = "fa fa-sort custom"> </ i>
<i class = "fa fa-sort-alpha-asc custom"> </ i>
<i class = "fa fa-sort-alpha-desc custom"> </ i>
<i class = "fa fa-sort-asc custom"> </ i>
<i class = "fa fa-sort-desc custom"> </ i>
<i class = "fa fa-sort-down custom"> </ i>
<i class = "fa fa-sort-numeric-asc custom"> </ i>
<i class = "fa fa-sort-numeric-desc custom"> </ i>
<i class = "fa fa-sort-up custom"> </ i>
<i class = "fa fa-space-shuttle custom"> </ i>
<i class = "fa fa-spinner custom"> </ i>
<i class = "fa fa-spoon custom"> </ i>
<i class = "fa fa-square custom"> </ i>
<i class = "fa fa-square-o custom"> </ i>
<i class = "fa fa-star custom"> </ i>
<i class = "fa fa-star-half custom"> </ i>
<i class = "fa fa-star-half-empty custom"> </ i>
<i class = "fa fa-star-half-full custom"> </ i>
<i class = "fa fa-star-half-o custom"> </ i>
<i class = "fa fa-star-o custom"> </ i>
<i class = "fa fa-sticky-note custom"> </ i>
<i class = "fa fa-sticky-note-o custom"> </ i>
<i class = "fa fa-street-view custom"> </ i>
<i class = "fa fa-suitcase custom"> </ i>
<i class = "fa fa-sun-o custom"> </ i>
<i class = "fa fa-support custom"> </ i>
<i class = "fa fa-tablet custom"> </ i>
<i class = "fa fa-tachometer custom"> </ i>
<i class = "fa fa-tag custom"> </ i>
<i class = "fa fa-tags custom"> </ i>
<i class = "fa fa-tasks custom"> </ i>
<i class = "fa fa-taxi custom"> </ i>
<i class = "fa fa-television custom"> </ i>
<i class = "fa fa-terminal custom"> </ i>
<i class = "fa fa-thumb-tack custom"> </ i>
<i class = "fa fa-thumbs-down custom"> </ i>
<i class = "fa fa-ticket custom"> </ i>
<i class = "fa fa-times custom"> </ i>
<i class = "fa fa-times-circle custom"> </ i>
<i class = "fa fa-times-circle-o custom"> </ i>
<i class = "fa fa-tint custom"> </ i>
<i class = "fa fa-toggle-down custom"> </ i>
<i class = "fa fa-toggle-left custom"> </ i>
<i class = "fa fa-toggle-off custom"> </ i>
<i class = "fa fa-toggle-on custom"> </ i>
<i class = "fa fa-toggle-right custom"> </ i>
<i class = "fa fa-toggle-up custom"> </ i>
<i class = "fa fa-trademark custom"> </ i>
<i class = "fa fa-tras custom"> </ i>
<i class = "fa fa-trash-o custom"> </ i>
<i class = "fa fa-tree custom"> </ i>
<i class = "fa fa-trophy custom"> </ i>
<i class = "fa fa-truck custom"> </ i>
<i class = "fa fa-wheelchair custom"> </ i>
<i class = "fa fa-tv custom"> </ i>
<i class = "fa fa-umbrella custom"> </ i>
<i class = "fa fa-university custom"> </ i>
<i class = "fa fa-unlock custom"> </ i>
<i class = "fa fa-unlock-alt custom"> </ i>
<i class = "fa fa-unsorted custom"> </ i>
<i class = "fa fa-upload custom"> </ i>
<i class = "fa fa-user custom"> </ i>
<i class = "fa fa-user-plus custom"> </ i>
<i class = "fa fa-user-secret custom"> </ i>
<i class = "fa fa-user-times custom"> </ i>

이 장에서는 Font Awesome Hand 아이콘의 사용법에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예에서와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

다음 표는 Font Awesome Hand 아이콘의 사용법과 결과를 보여줍니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	결과
<i class = "fa fa-hand-rock-o custom"> </ i>
<i class = "fa fa-hand-o-left custom"> </ i>
<i class = "fa fa-hand-paper-o custom"> </ i>
<i class = "fa fa-hand-rock-o custom"> </ i>
<i class = "fa fa-hand-stop-o custom"> </ i>
<i class = "fa fa-thumbs-o-up custom"> </ i>
<i class = "fa fa-hand-lizard-o custom"> </ i>
<i class = "fa fa-hand-o-right custom"> </ i>
<i class = "fa fa-hand-peace-o custom"> </ i>
<i class = "fa fa-hand-scissors-o custom"> </ i>
<i class = "fa fa-thumbs-down custom"> </ i>
<i class = "fa fa-thumbs-up custom"> </ i>
<i class = "fa fa-hand-o-up custom"> </ i>
<i class = "fa fa-hand-pointer-o custom"> </ i>
<i class = "fa fa-hand-spock-o custom"> </ i>
<i class = "fa fa-thumbs-o-down custom"> </ i>

이 장에서는 Font Awesome Transportation 아이콘의 사용법에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예에서와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

다음 표는 Font Awesome Transportation 아이콘의 사용법과 결과를 보여줍니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	결과
<i class = "fa fa-ambulance custom"> </ i>
<i class = "fa fa-automobile custom"> </ i>
<i class = "fa fa-bicycle custom"> </ i>
<i class = "fa fa-bus custom"> </ i>
<i class = "fa fa-cab custom"> </ i>
<i class = "fa fa-car custom"> </ i>
<i class = "fa fa-fighter-jet custom"> </ i>
<i class = "fa fa-motorcycle custom"> </ i>
<i class = "fa fa-plane custom"> </ i>
<i class = "fa fa-rocket custom"> </ i>
<i class = "fa fa-ship custom"> </ i>
<i class = "fa fa-space-shuttle custom"> </ i>
<i class = "fa fa-subway custom"> </ i>
<i class = "fa fa-taxi custom"> </ i>
<i class = "fa fa-train custom"> </ i>
<i class = "fa fa-truck custom"> </ i>
<i class = "fa fa-wheelchair custom"> </ i>

이 장에서는 Font Awesome Gender 아이콘의 사용법에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예에서와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

다음 표는 Font Awesome Gender 아이콘의 사용법과 결과를 보여줍니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	결과
<i class = "fa fa-genderless custom"> </ i>
<i class = "fa fa-intersex custom"> </ i>
<i class = "fa fa-mars custom"> </ i>
<i class = "fa fa-mars-double custom"> </ i>
<i class = "fa fa-mars-stroke custom"> </ i>
<i class = "fa fa-mars-stroke-h 사용자 지정"> </ i>
<i class = "fa fa-mars-stroke-v custom"> </ i>
<i class = "fa fa-mercury custom"> </ i>
<i class = "fa fa-neuter custom"> </ i>
<i class = "fa fa-transgender custom"> </ i>
<i class = "fa fa-transgender-alt custom"> </ i>
<i class = "fa fa-venus custom"> </ i>
<i class = "fa fa-venus-double custom"> </ i>
<i class = "fa fa-venus-mars custom"> </ i>

이 장에서는 Font Awesome File Type 아이콘의 사용법에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예에서와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

다음 표는 Font Awesome File Type 아이콘의 사용법과 결과를 보여줍니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	결과
<i class = "fa fa-file custom"> </ i>
<i class = "fa fa-file-archive-o 사용자 지정"> </ i>
<i class = "fa fa-file-audio-o custom"> </ i>
<i class = "fa fa-file-code-o custom"> </ i>
<i class = "fa fa-file-excel-o custom"> </ i>
<i class = "fa fa-file-image-o 사용자 지정"> </ i>
<i class = "fa fa-file-movie-o custom"> </ i>
<i class = "fa fa-file-o custom"> </ i>
<i class = "fa fa-file-pdf-o custom"> </ i>
<i class = "fa fa-file-photo-o custom"> </ i>
<i class = "fa fa-file-picture-o custom"> </ i>
<i class = "fa fa-file-powerpoint-o custom"> </ i>
<i class = "fa fa-file-video-o custom"> </ i>
<i class = "fa fa-file-word-o custom"> </ i>
<i class = "fa fa-file-zip-o custom"> </ i>
<i class = "fa fa-file-sound-o 사용자 지정"> </ i>
<i class = "fa fa-file-text custom"> </ i>
<i class = "fa fa-file-text-o custom"> </ i>

이 장에서는 Font Awesome Spinner 아이콘의 사용법에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예에서와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

다음 표는 Font Awesome Spinner 아이콘의 사용법과 결과를 보여줍니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	결과
<i class = "fa fa-circle-o-notch custom"> </ i>
<i class = "fa fa-cog custom"> </ i>
<i class = "fa fa-gear custom"> </ i>
<i class = "fa fa-refresh custom"> </ i>
<i class = "fa fa-spinner custom"> </ i>

이 장에서는 Font Awesome Form Control 아이콘의 사용법에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예에서와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

다음 표는 Font Awesome Form Control 아이콘의 사용법과 결과를 보여줍니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	결과
<i class = "fa fa-check-square custom"> </ i>
<i class = "fa fa-check-square-o custom"> </ i>
<i class = "fa fa-circle custom"> </ i>
<i class = "fa fa-circle-o custom"> </ i>
<i class = "fa fa-dot-circle-o custom"> </ i>
<i class = "fa fa-minus-square custom"> </ i>
<i class = "fa fa-minus-square-o custom"> </ i>
<i class = "fa fa-plus-square custom"> </ i>
<i class = "fa fa-plus-square-o custom"> </ i>
<i class = "fa fa-square custom"> </ i>
<i class = "fa fa-square-o custom"> </ i>

이 장에서는 Font Awesome Payment 아이콘의 사용법에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예에서와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

다음 표는 Font Awesome Payment 아이콘의 사용법과 결과를 보여줍니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	결과
<i class = "fa fa-cc-amex custom"> </ i>
<i class = "fa fa-cc-diners-club custom"> </ i>
<i class = "fa fa-cc-discover custom"> </ i>
<i class = "fa fa-cc-jcb custom"> </ i>
<i class = "fa fa-cc-mastercard custom"> </ i>
<i class = "fa fa-cc-paypal custom"> </ i>
<i class = "fa fa-cc-stripe custom"> </ i>
<i class = "fa fa-cc-visa custom"> </ i>
<i class = "fa fa-credit-card custom"> </ i>

이 장에서는 Font Awesome Chart 아이콘의 사용법에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예에서와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<html>
   <head>
      <link rel="stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

다음 표는 Font Awesome Chart 아이콘의 사용법과 결과를 보여줍니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	결과
<i class = "fa fa-area-chart custom"> </ i>
<i class = "fa fa-bar-chart custom"> </ i>
<i class = "fa fa-bar-chart-o custom"> </ i>
<i class = "fa fa-line-chart custom"> </ i>
<i class = "fa fa-pie-chart custom"> </ i>

이 장에서는 Font Awesome Currency 아이콘의 사용법에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예에서와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

다음 표는 Font Awesome Currency 아이콘의 사용법과 결과를 보여줍니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	결과
<i class = "fa fa-bitcoin custom"> </ i>
<i class = "fa fa-btc custom"> </ i>
<i class = "fa fa-cny custom"> </ i>
<i class = "fa fa-dollar custom"> </ i>
<i class = "fa fa-eur custom"> </ i>
<i class = "fa fa-euro custom"> </ i>
<i class = "fa fa-gbp custom"> </ i>
<i class = "fa fa-gg custom"> </ i>
<i class = "fa fa-gg-circle custom"> </ i>
<i class = "fa-ils custom"> </ i>
<i class = "fa fa-inr custom"> </ i>
<i class = "fa fa-jpy custom"> </ i>
<i class = "fa fa-krw custom"> </ i>
<i class = "fa fa-money custom"> </ i>
<i class = "fa fa-rmb custom"> </ i>
<i class = "fa fa-rouble custom"> </ i>
<i class = "fa fa-rub custom"> </ i>
<i class = "fa fa-ruble custom"> </ i>
<i class = "fa fa-rupee custom"> </ i>
<i class = "fa fa-shekel custom"> </ i>
<i class = "fa fa-sheqel custom"> </ i>
<i class = "fa fa-try custom"> </ i>
<i class = "fa fa-turkish-lira custom"> </ i>
<i class = "fa fa-usd custom"> </ i>
<i class = "fa fa-won custom"> </ i>
<i class = "fa fa-yen custom"> </ i>

이 장에서는 Font Awesome Text Editor 아이콘의 사용법에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예에서와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

다음 표는 Font Awesome Text Editor 아이콘의 사용법과 결과를 보여줍니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	결과
<i class = "fa fa-align-center custom"> </ i>
<i class = "fa fa-align-justify custom"> </ i>
<i class = "fa fa-align-left custom"> </ i>
<i class = "fa fa-align-right custom"> </ i>
<i class = "fa fa-bold custom"> </ i>
<i class = "fa fa-chain custom"> </ i>
<i class = "fa fa-chain-broken custom"> </ i>
<i class = "fa fa-clipboard custom"> </ i>
<i class = "fa fa-columns custom"> </ i>
<i class = "fa fa-copy custom"> </ i>
<i class = "fa fa-cut custom"> </ i>
<i class = "fa fa-dedent custom"> </ i>
<i class = "fa fa-eraser custom"> </ i>
<i class = "fa fa-file custom"> </ i>
<i class = "fa fa-file-o custom"> </ i>
<i class = "fa fa-file-text custom"> </ i>
<i class = "fa fa-file-text-o custom"> </ i>
<i class = "fa fa-files-o custom"> </ i>
<i class = "fa fa-floppy-o custom"> </ i>
<i class = "fa fa-font custom"> </ i>
<i class = "fa fa-header custom"> </ i>
<i class = "fa fa-indent custom"> </ i>
<i class = "fa fa-italic custom"> </ i>
<i class = "fa fa-link custom"> </ i>
<i class = "fa fa-list custom"> </ i>
<i class = "fa fa-list-alt custom"> </ i>
<i class = "fa fa-list-ol custom"> </ i>
<i class = "fa fa-list-ul custom"> </ i>
<i class = "fa fa-outdent custom"> </ i>
<i class = "fa fa-paperclip custom"> </ i>
<i class = "fa fa-paragraph custom"> </ i>
<i class = "fa fa-paste custom"> </ i>
<i class = "fa fa-repeat custom"> </ i>
<i class = "fa fa-rotate-left custom"> </ i>
<i class = "fa fa-rotate-right custom"> </ i>
<i class = "fa fa-save custom"> </ i>
<i class = "fa fa-scissors custom"> </ i>
<i class = "fa fa-strikethrough custom"> </ i>
<i class = "fa fa-subscript custom"> </ i>
<i class = "fa fa-table custom"> </ i>
<i class = "fa fa-text-heigh custom"> </ i>
<i class = "fa fa-text-width custom"> </ i>
<i class = "fa fa-th custom"> </ i>
<i class = "fa fa-th-large custom"> </ i>
<i class = "fa fa-th-list custom"> </ i>
<i class = "fa fa-underline custom"> </ i>
<i class = "fa fa-undo custom"> </ i>
<i class = "fa fa-unlink custom"> </ i>

이 장에서는 Font Awesome Directional 아이콘의 사용법에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예에서와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

다음 표는 Font Awesome Directional 아이콘의 사용법과 결과를 보여줍니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	결과
<i class = "fa fa-angle-double-down custom"> </ i>
<i class = "fa fa-angle-double-left custom"> </ i>
<i class = "fa fa-angle-double-right custom"> </ i>
<i class = "fa fa-angle-double-up custom"> </ i>
<i class = "fa fa-angle-down custom"> </ i>
<i class = "fa fa-angle-left custom"> </ i>
<i class = "fa fa-angle-right custom"> </ i>
<i class = "fa fa-angle-up custom"> </ i>
<i class = "fa fa-arrow-circle-down custom"> </ i>
<i class = "fa fa-arrow-circle-left custom"> </ i>
<i class = "fa fa-arrow-circle-right custom"> </ i>
<i class = "fa fa-arrow-circle-up custom"> </ i>
<i class = "fa fa-arrow-circle-o-down custom"> </ i>
<i class = "fa fa-arrow-circle-o-left custom"> </ i>
<i class = "fa fa-arrow-circle-o-right custom"> </ i>
<i class = "fa fa-arrow-circle-o-up custom"> </ i>
<i class = "fa fa-arrow-down custom"> </ i>
<i class = "fa fa-arrow-left custom"> </ i>
<i class = "fa fa-arrow-right custom"> </ i>
<i class = "fa fa-arrow-up custom"> </ i>
<i class = "fa fa-arrows custom"> </ i>
<i class = "fa fa-arrows-alt custom"> </ i>
<i class = "fa fa-arrows-h 사용자 지정"> </ i>
<i class = "fa fa-arrows-v custom"> </ i>
<i class = "fa fa-caret-down custom"> </ i>
<i class = "fa fa-caret-left custom"> </ i>
<i class = "fa fa-caret-right custom"> </ i>
<i class = "fa fa-caret-up custom"> </ i>
<i class = "fa fa-caret-square-o-down custom"> </ i>
<i class = "fa fa-caret-square-o-left custom"> </ i>
<i class = "fa fa-caret-square-o-right custom"> </ i>
<i class = "fa fa-caret-square-o-up custom"> </ i>
<i class = "fa fa-chevron-circle-down custom"> </ i>
<i class = "fa fa-chevron-circle-left custom"> </ i>
<i class = "fa fa-chevron-circle-right custom"> </ i>
<i class = "fa fa-chevron-circle-up custom"> </ i>
<i class = "fa fa-chevron-down custom"> </ i>
<i class = "fa fa-chevron-left custom"> </ i>
<i class = "fa fa-chevron-right custom"> </ i>
<i class = "fa fa-chevron-up custom"> </ i>
<i class = "fa fa-hand-o-down custom"> </ i>
<i class = "fa fa-hand-o-left custom"> </ i>
<i class = "fa fa-hand-o-right custom"> </ i>
<i class = "fa fa-hand-o-up custom"> </ i>
<i class = "fa fa-long-arrow-down custom"> </ i>
<i class = "fa fa-long-arrow-left custom"> </ i>
<i class = "fa fa-long-arrow-right custom"> </ i>
<i class = "fa fa-long-arrow-up custom"> </ i>
<i class = "fa fa-toggle-down custom"> </ i>
<i class = "fa fa-toggle-left custom"> </ i>
<i class = "fa fa-toggle-right custom"> </ i>
<i class = "fa fa-toggle-up custom"> </ i>
<i class = "fa fa-exchange custom"> </ i>

이 장에서는 Font Awesome Video Player 아이콘의 사용법에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예에서와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

다음 표는 Font Awesome Video Player 아이콘의 사용법과 결과를 보여줍니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	아이콘
<i class = "fa fa-arrows-alt custom"> </ i>
<i class = "fa fa-backward custom"> </ i>
<i class = "fa fa-compress custom"> </ i>
<i class = "fa fa-eject custom"> </ i>
<i class = "fa fa-expand custom"> </ i>
<i class = "fa fa-fast-backward custom"> </ i>
<i class = "fa fa-fast-forward 사용자 지정"> </ i>
<i class = "fa fa-forward custom"> </ i>
<i class = "fa fa-play-circle custom"> </ i>
<i class = "fa fa-play-circle-o custom"> </ i>
<i class = "fa fa-random custom"> </ i>
<i class = "fa fa-step-backward custom"> </ i>
<i class = "fa fa-stop custom"> </ i>
<i class = "fa fa-pause custom"> </ i>
<i class = "fa fa-play custom"> </ i>
<i class = "fa fa-youtube-play custom"> </ i>

이 장에서는 Font Awesome Brand 아이콘의 사용법에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예에서와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

다음 표는 Font Awesome Brand 아이콘의 사용법과 결과를 보여줍니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	아이콘
<i class = "fa fa-500px custom"> </ i>
<i class = "fa fa-amazon custom"> </ i>
<i class = "fa fa-android custom"> </ i>
<i class = "fa fa-angellist custom"> </ i>
<i class = "fa fa-adn custom"> </ i>
<i class = "fa fa-apple custom"> </ i>
<i class = "fa fa-behance custom"> </ i>
<i class = "fa fa-behance-square 사용자 정의"> </ i>
<i class = "fa fa-bitbucket custom"> </ i>
<i class = "fa fa-bitbucket-square 사용자 지정"> </ i>
<i class = "fa fa-btc custom"> </ i>
<i class = "fa fa-black-tie custom"> </ i>
<i class = "fa fa-btc custom"> </ i>
<i class = "fa fa-buysellads custom"> </ i>
<i class = "fa fa-cc-amex custom"> </ i>
<i class = "fa fa-cc-diners-club custom"> </ i>
<i class = "fa fa-cc-discover custom"> </ i>
<i class = "fa fa-cc-jcb custom"> </ i>
<i class = "fa fa-cc-mastercard custom"> </ i>
<i class = "fa fa-cc-paypal custom"> </ i>
<i class = "fa fa-cc-stripe custom"> </ i>
<i class = "fa fa-cc-visa custom"> </ i>
<i class = "fa fa-chrome custom"> </ i>
<i class = "fa fa-codepen custom"> </ i>
<i class = "fa fa-connectdevelop custom"> </ i>
<i class = "fa fa-contao custom"> </ i>
<i class = "fa fa-css3 custom"> </ i>
<i class = "fa fa-dashcube custom"> </ i>
<i class = "fa fa-delicious custom"> </ i>
<i class = "fa fa-deviantart custom"> </ i>
<i class = "fa fa-digg custom"> </ i>
<i class = "fa fa-dribbble custom"> </ i>
<i class = "fa fa-dropbox custom"> </ i>
<i class = "fa fa-drupal custom"> </ i>
<i class = "fa fa-empire custom"> </ i>
<i class = "fa fa-expeditedssl custom"> </ i>
<i class = "fa fa-facebook custom"> </ i>
<i class = "fa fa-facebook-f custom"> </ i>
<i class = "fa fa-facebook-official custom"> </ i>
<i class = "fa fa-facebook-square custom"> </ i>
<i class = "fa fa-firefox custom"> </ i>
<i class = "fa fa-flickr custom"> </ i>
<i class = "fa fa-fonticons custom"> </ i>
<i class = "fa fa-forumbee custom"> </ i>
<i class = "fa fa-foursquare custom"> </ i>
<i class = "fa fa-ge custom"> </ i>
<i class = "fa fa-get-pocket custom"> </ i>
<i class = "fa fa-gg custom"> </ i>
<i class = "fa fa-gg-circle custom"> </ i>
<i class = "fa fa-git custom"> </ i>
<i class = "fa fa-git-square custom"> </ i>
<i class = "fa fa-github custom"> </ i>
<i class = "fa fa-github-alt custom"> </ i>
<i class = "fa fa-github-square custom"> </ i>
<i class = "fa fa-gratipay custom"> </ i>
<i class = "fa fa-google custom"> </ i>
<i class = "fa fa-google-plus custom"> </ i>
<i class = "fa fa-google-plus-square 사용자 지정"> </ i>
<i class = "fa fa-youtube-play custom"> </ i>
<i class = "fa fa-gratipay custom"> </ i>
<i class = "fa fa-hacker-news custom"> </ i>
<i class = "fa fa-houzz custom"> </ i>
<i class = "fa fa-html5 custom"> </ i>
<i class = "fa fa-instagram custom"> </ i>
<i class = "fa fa-internet-explorer custom"> </ i>
<i class = "fa fa-ioxhost custom"> </ i>
<i class = "fa fa-joomla custom"> </ i>
<i class = "fa fa-jsfiddle custom"> </ i>
<i class = "fa fa-lastfm custom"> </ i>
<i class = "fa fa-lastfm-square custom"> </ i>
<i class = "fa fa-leanpub custom"> </ i>
<i class = "fa fa-linkedin custom"> </ i>
<i class = "fa fa-linkedin-square custom"> </ i>
<i class = "fa fa-linux custom"> </ i>
<i class = "fa fa-maxcdn custom"> </ i>
<i class = "fa fa-meanpath custom"> </ i>
<i class = "fa fa-medium custom"> </ i>
<i class = "fa fa-odnoklassniki custom"> </ i>
<i class = "fa fa-odnoklassniki-square custom"> </ i>
<i class = "fa fa-opencart custom"> </ i>
<i class = "fa fa-opera custom"> </ i>
<i class = "fa fa-optin-monster custom"> </ i>
<i class = "fa fa-openid custom"> </ i>
<i class = "fa fa-pagelines custom"> </ i>
<i class = "fa fa-youtube custom"> </ i>
<i class = "fa fa-pied-piper custom"> </ i>
<i class = "fa fa-pied-piper-alt custom"> </ i>
<i class = "fa fa-pinterest custom"> </ i>
<i class = "fa fa-pinterest-p custom"> </ i>
<i class = "fa fa-pinterest-square custom"> </ i>
<i class = "fa fa-qq custom"> </ i>
<i class = "fa fa-ra custom"> </ i>
<i class = "fa fa-rebel custom"> </ i>
<i class = "fa fa-reddit custom"> </ i>
<i class = "fa fa-renren custom"> </ i>
<i class = "fa fa-amazon custom"> </ i>
<i class = "fa fa-safari custom"> </ i>
<i class = "fa fa-sellsy custom"> </ i>
<i class = "fa fa-youtube-square 맞춤"> </ i>
<i class = "fa fa-share-alt custom"> </ i>
<i class = "fa fa-share-alt-square custom"> </ i>
<i class = "fa fa-shirtsinbulk custom"> </ i>
<i class = "fa fa-simplybuilt custom"> </ i>
<i class = "fa fa-skyatlas custom"> </ i>
<i class = "fa fa-skype custom"> </ i>
<i class = "fa fa-slack custom"> </ i>
<i class = "fa fa-yc-square 사용자 지정"> </ i>
<i class = "fa fa-soundcloud custom"> </ i>
<i class = "fa fa-spotify custom"> </ i>
<i class = "fa fa-stack-exchange custom"> </ i>
<i class = "fa fa-stack-overflow custom"> </ i>
<i class = "fa fa-steam custom"> </ i>
<i class = "fa fa-steam-square custom"> </ i>
<i class = "fa fa-stumbleupon custom"> </ i>
<i class = "fa fa-stumbleupon-circle custom"> </ i>
<i class = "fa fa-tencent-weibo custom"> </ i>
<i class = "fa fa-trello custom"> </ i>
<i class = "fa fa-tripadvisor custom"> </ i>
<i class = "fa fa-tumblr custom"> </ i>
<i class = "fa fa-tumblr-square 사용자 지정"> </ i>
<i class = "fa fa-yahoo custom"> </ i>
<i class = "fa fa-twitter custom"> </ i>
<i class = "fa fa-twitter-square custom"> </ i>
<i class = "fa fa-viacoin custom"> </ i>
<i class = "fa fa-vimeo custom"> </ i>
<i class = "fa fa-vimeo-square 사용자 정의"> </ i>
<i class = "fa fa-vine custom"> </ i>
<i class = "fa fa-vk custom"> </ i>
<i class = "fa fa-wechat custom"> </ i>
<i class = "fa fa-weibo custom"> </ i>
<i class = "fa fa-weixin custom"> </ i>
<i class = "fa fa-whatsapp custom"> </ i>
<i class = "fa fa-wikipedia-w custom"> </ i>
<i class = "fa fa-windows custom"> </ i>
<i class = "fa fa-wordpress custom"> </ i>
<i class = "fa-xing custom"> </ i>
<i class = "fa fa-xing-square 사용자 정의"> </ i>
<i class = "fa fa-y-combinator custom"> </ i>
<i class = "fa fa-y-combinator-square 사용자 지정"> </ i>
<i class = "fa fa-yc custom"> </ i>

이 장에서는 Font Awesome Medical 아이콘의 사용법에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예에서와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

다음 표는 Font Awesome Medical 아이콘의 사용법과 결과를 보여줍니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	상
<i class = "fa fa-ambulance custom"> </ i>
<i class = "fa fa-h-square 사용자 지정"> </ i>
<i class = "fa fa-heart custom"> </ i>
<i class = "fa fa-heart-o custom"> </ i>
<i class = "fa fa-heartbeat custom"> </ i>
<i class = "fa fa-hospital-o custom"> </ i>
<i class = "fa fa-medkit custom"> </ i>
<i class = "fa fa-plus-square custom"> </ i>
<i class = "fa fa-stethoscope custom"> </ i>
<i class = "fa fa-user-md custom"> </ i>
<i class = "fa fa-wheelchair custom"> </ i>

Google은 '머티리얼 디자인 가이드 라인'에 따라 디자인 된 750 개의 아이콘 세트를 제공하며 Material Design아이콘. 이 아이콘은 간단하며 모든 최신 웹 브라우저를 지원합니다. 이러한 아이콘은 벡터 기반이므로 확장 가능합니다. 이 아이콘을 사용하려면 글꼴 (라이브러리)을로드해야합니다.material-icons.

글꼴로드 (라이브러리)

재질 아이콘 라이브러리를로드하려면 웹 페이지의 <head> 섹션에 다음 줄을 복사하여 붙여 넣습니다.

<head>
   <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
</head>

아이콘 사용

Google의 Material Icons는 긴 아이콘 목록을 제공합니다. 그중 하나를 선택하고 <body> 태그 내의 HTML 요소에 아이콘 클래스 이름을 추가합니다. 다음 예에서는 이름이 지정된 아이콘을 사용했습니다.accessibility 액션 카테고리에 속합니다.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
   </head>
	
   <body>
      <i class = "material-icons">accessibility</i>
   </body>
	
</html>

다음 출력을 생성합니다-

크기 정의

CSS에서 크기를 정의하고 아래와 같이 클래스 이름과 함께 사용하여 아이콘의 크기를 늘리거나 줄일 수 있습니다. 다음 예에서는 크기를 6 em으로 선언했습니다.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.mysize {font-size: 6em;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons mysize">accessibility</i>
   </body>
	
</html>

다음 출력을 생성합니다-

색상 정의

CSS를 사용하여 아이콘의 색상을 정의 할 수 있습니다. 다음 예제는라는 아이콘의 색상을 변경하는 방법을 보여줍니다.accessibility.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 6em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

다음 출력을 생성합니다-

카테고리 목록

Google의 Material Icons 글꼴은 다음 카테고리에서 519 개의 아이콘을 제공합니다.

액션 아이콘
경고 아이콘
AV 아이콘
통신 아이콘
콘텐츠 아이콘
장치 아이콘
편집기 아이콘
파일 아이콘
하드웨어 아이콘
이미지 아이콘
지도 아이콘
탐색 아이콘
알림 아이콘
사회 아이콘
아이콘 전환

이러한 아이콘을 사용하려면이 장에 제공된 프로그램의 클래스 이름을 원하는 아이콘의 클래스 이름으로 바꿔야합니다. 이 단원 (머티리얼 아이콘)의 다음 장에서는 다양한 머티리얼 아이콘의 사용법과 각각의 출력을 범주별로 설명했습니다.

이 장에서는 Google의 (자료) 액션 아이콘 사용에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예에서와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

다음 표에는 Google의 (자료) 작업 아이콘의 사용법과 결과가 포함되어 있습니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	결과
<i class = "material-icons custom"> 3d_rotation </ i>	3d_rotation
<i class = "material-icons custom"> 접근성 </ i>	접근성
<i class = "material-icons custom"> 계정 _ 잔액 </ i>	계정 잔액
<i class = "material-icons custom"> account_balance_wallet </ i>	account_balance_wallet
<i class = "material-icons custom"> account_box </ i>	account_box
<i class = "material-icons custom"> account_circle </ i>	account_circle
<i class = "material-icons custom"> add_shopping_cart </ i>	add_shopping_cart
<i class = "material-icons custom"> 알람 </ i>	경보
<i class = "material-icons custom"> alarm_add </ i>	alarm_add
<i class = "material-icons custom"> alarm_off </ i>	alarm_off
<i class = "material-icons custom"> alarm_on </ i>	alarm_on
<i class = "material-icons custom"> 안드로이드 </ i>	기계적 인조 인간
<i class = "material-icons custom"> 공지 </ i>	발표
<i class = "material-icons custom"> aspect_ratio </ i>	종횡비
<i class = "material-icons custom"> 평가 </ i>	평가
<i class = "material-icons custom"> 할당 </ i>	할당
<i class = "material-icons custom"> assignment_ind </ i>	assignment_ind
<i class = "material-icons custom"> 할당 _ 늦음 </ i>	과제 _ 지연
<i class = "material-icons custom"> 할당 _ 반품 </ i>	할당 _ 반품
<i class = "material-icons custom"> 할당 _ 반환 됨 </ i>	할당 _ 반환
<i class = "material-icons custom"> assignment_turned_in </ i>	할당 _ 전환 _ 인
<i class = "material-icons custom"> 자동 갱신 </ i>	자동 갱신
<i class = "material-icons custom"> 백업 </ i>	지원
<i class = "material-icons custom"> 책 </ i>	책
<i class = "material-icons custom"> 북마크 </ i>	서표
<i class = "material-icons custom"> bookmark_border </ i>	bookmark_border
<i class = "material-icons custom"> 버그 _ 보고서 </ i>	버그 신고
<i class = "material-icons custom"> 빌드 </ i>	짓다
<i class = "material-icons custom"> 캐시 됨 </ i>	캐시 됨
<i class = "material-icons custom"> camera_enhance </ i>	camera_enhance
<i class = "material-icons custom"> card_giftcard </ i>	card_giftcard
<i class = "material-icons custom"> card_membership </ i>	card_membership
<i class = "material-icons custom"> 카드 _ 여행 </ i>	card_travel
<i class = "material-icons custom"> 변경 _ 역사 </ i>	change_history
<i class = "material-icons custom"> 체크 _ 서클 </ i>	check_circle
<i class = "material-icons custom"> chrome_reader_mode </ i>	chrome_reader_mode
<i class = "material-icons custom"> 수업 </ i>	수업
<i class = "material-icons custom"> 코드 </ i>	암호
<i class = "material-icons custom"> 신용 카드 </ i>	신용 카드
<i class = "material-icons custom"> 대시 보드 </ i>	계기반
<i class = "material-icons custom"> 삭제 </ i>	지우다
<i class = "material-icons custom"> 설명 </ i>	기술
<i class = "material-icons custom"> dns </ i>	dns
<i class = "material-icons custom"> 완료 </ i>	끝난
<i class = "material-icons custom"> done_all </ i>	done_all
<i class = "material-icons custom"> 꺼내기 </ i>	꺼내다
<i class = "material-icons custom"> 이벤트 </ i>	행사
<i class = "material-icons custom"> event_seat </ i>	이벤트 _ 좌석
<i class = "material-icons custom"> exit_to_app </ i>	exit_to_app
<i class = "material-icons custom"> 탐색 </ i>	탐험하다
<i class = "material-icons custom"> 확장자 </ i>	신장
<i class = "material-icons custom"> 얼굴 </ i>	얼굴
<i class = "material-icons custom"> 즐겨 찾기 </ i>	특히 잘하는
<i class = "material-icons custom"> favorite_border </ i>	favorite_border
<i class = "material-icons custom"> 피드백 </ i>	피드백
<i class = "material-icons custom"> find_in_page </ i>	find_in_page
<i class = "material-icons custom"> find_replace </ i>	find_replace
<i class = "material-icons custom"> flight_land </ i>	flight_land
<i class = "material-icons custom"> flight_takeoff </ i>	flight_takeoff
<i class = "material-icons custom"> 뒤집 _ 뒤로 </ i>	flip_to_back
<i class = "material-icons custom"> 앞으로 뒤집기 </ i>	flip_to_front
<i class = "material-icons custom"> get_app </ i>	get_app
<i class = "material-icons custom"> gif </ i>	gif
<i class = "material-icons custom"> 등급 </ i>	등급
<i class = "material-icons custom"> group_work </ i>	그룹 과제
<i class = "material-icons custom"> 도움말 </ i>	도움
<i class = "material-icons custom"> help_outline </ i>	help_outline
<i class = "material-icons custom"> highlight_off </ i>	highlight_off
<i class = "material-icons custom"> 역사 </ i>	역사
<i class = "material-icons custom"> 홈 </ i>	집
<i class = "material-icons custom"> hourglass_empty </ i>	hourglass_empty
<i class = "material-icons custom"> 모래 시계 전체 </ i>	hourglass_full
<i class = "material-icons custom"> http </ i>	http
<i class = "material-icons custom"> https </ i>	https
<i class = "material-icons custom"> 정보 </ i>	정보
<i class = "material-icons custom"> info_outline </ i>	info_outline
<i class = "material-icons custom"> 입력 </ i>	입력
<i class = "material-icons custom"> invert_colors </ i>	반전 색상
<i class = "material-icons custom"> 라벨 </ i>	상표
<i class = "material-icons custom"> label_outline </ i>	label_outline
<i class = "material-icons custom"> 언어 </ i>	언어
<i class = "material-icons custom"> 출시 </ i>	시작하다
<i class = "material-icons custom"> 목록 </ i>	명부
<i class = "material-icons custom"> 잠금 </ i>	자물쇠
<i class = "material-icons custom"> lock_open </ i>	lock_open
<i class = "material-icons custom"> lock_outline </ i>	lock_outline
<i class = "material-icons custom"> 충성도 </ i>	충의
<i class = "material-icons custom"> markunread_mailbox </ i>	markunread_mailbox
<i class = "material-icons custom"> note_add </ i>	note_add
<i class = "material-icons custom"> offline_pin </ i>	offline_pin
<i class = "material-icons custom"> 브라우저에서 _ 열기 </ i>	브라우저에서 열려
<i class = "material-icons custom"> open_in_new </ i>	open_in_new
<i class = "material-icons custom"> open_with </ i>	open_with
<i class = "material-icons custom"> 페이지 뷰 </ i>	페이지보기
<i class = "material-icons custom"> 결제 </ i>	지불
<i class = "material-icons custom"> perm_camera_mic </ i>	perm_camera_mic
<i class = "material-icons custom"> perm_contact_cale </ i>	perm_contact_cale
<i class = "material-icons custom"> perm_data_settings </ i>	perm_data_settings
<i class = "material-icons custom"> perm_device_information </ i>	perm_device_information
<i class = "material-icons custom"> perm_identity </ i>	perm_identity
<i class = "material-icons custom"> perm_media </ i>	perm_media
<i class = "material-icons custom"> perm_phone_msg </ i>	perm_phone_msg
<i class = "material-icons custom"> perm_scan_wifi </ i>	perm_scan_wifi
<i class = "material-icons custom"> picture_in_picture </ i>	picture_in_picture
<i class = "material-icons custom"> 일을위한 _ 놀이 </ i>	play_for_work
<i class = "material-icons custom"> 폴리머 </ i>	고분자
<i class = "material-icons custom"> power_settings_new </ i>	power_settings_new
<i class = "material-icons custom"> 인쇄 </ i>	인쇄
<i class = "material-icons custom"> query_builder </ i>	query_builder
<i class = "material-icons custom"> question_answer </ i>	질문 답변
<i class = "material-icons custom"> 영수증 </ i>	영수증
<i class = "material-icons custom"> 사용 </ i>	도로 사다
<i class = "material-icons custom"> 재주문 </ i>	재 주문
<i class = "material-icons custom"> 문제보고 </ i>	report_problem
<i class = "material-icons custom"> 복원 </ i>	복원
<i class = "material-icons custom"> 방 </ i>	방
<i class = "material-icons custom"> 일정 </ i>	시간표
<i class = "material-icons custom"> 검색 </ i>	검색
<i class = "material-icons custom"> 설정 </ i>	설정
<i class = "material-icons custom"> settings_applications </ i>	settings_applications
<i class = "material-icons custom"> settings_bluetooth </ i>	settings_bluetooth
<i class = "material-icons custom"> settings_brightness </ i>	settings_brightness
<i class = "material-icons custom"> settings_cell </ i>	settings_cell
<i class = "material-icons custom"> settings_ethernet </ i>	settings_ethernet
<i class = "material-icons custom"> settings_input_antenna </ i>	settings_input_antenna
<i class = "material-icons custom"> settings_input_component </ i>	settings_input_component
<i class = "material-icons custom"> settings_input_hdmi </ i>	settings_input_hdmi
<i class = "material-icons custom"> settings_input_svideo </ i>	settings_input_svideo
<i class = "material-icons custom"> settings_overscan </ i>	settings_overscan
<i class = "material-icons custom"> settings_phone </ i>	settings_phone
<i class = "material-icons custom"> settings_power </ i>	settings_power
<i class = "material-icons custom"> settings_remote </ i>	settings_remote
<i class = "material-icons custom"> settings_voice </ i>	settings_voice
<i class = "material-icons custom"> 쇼핑 </ i>	가게
<i class = "material-icons custom"> shop_two </ i>	shop_two
<i class = "material-icons custom"> 장바구니 </ i>	쇼핑 바구니
<i class = "material-icons custom"> 쇼핑 카트 </ i>	쇼핑 카트
<i class = "material-icons custom"> speaker_notes </ i>	speaker_notes
<i class = "material-icons custom"> 맞춤법 검사 </ i>	맞춤법 검사
<i class = "material-icons custom"> star_rate </ i>	star_rate
<i class = "material-icons custom"> 별 </ i>	별
<i class = "material-icons custom"> 상점 </ i>	저장
<i class = "material-icons custom"> 제목 </ i>	제목
<i class = "material-icons custom"> 감독자 _ 계정 </ i>	supervisor_account
<i class = "material-icons custom"> swap_horiz </ i>	swap_horiz
<i class = "material-icons custom"> swap_vert </ i>	swap_vert
<i class = "material-icons custom"> swap_vertical_circle </ i>	swap_vertical_circle
<i class = "material-icons custom"> system_update_alt </ i>	system_update_alt
<i class = "material-icons custom"> 탭 </ i>	탭
<i class = "material-icons custom"> tab_unselected </ i>	tab_unselected
<i class = "material-icons custom"> 극장 </ i>	극장
<i class = "material-icons custom"> thumb_down </ i>	thumb_down
<i class = "material-icons custom"> thumb_up </ i>	최고
<i class = "material-icons custom"> thumbs_up_down </ i>	thumb_up_down
<i class = "material-icons custom"> toc </ i>	toc
<i class = "material-icons custom"> 오늘 </ i>	오늘
<i class = "material-icons custom"> 요금 </ i>	통행료
<i class = "material-icons custom"> track_changes </ i>	track_changes
<i class = "material-icons custom"> 번역 </ i>	옮기다
<i class = "material-icons custom"> trending_down </ i>	trending_down
<i class = "material-icons custom"> trending_flat </ i>	trending_flat
<i class = "material-icons custom"> trending_up </ i>	trending_up
<i class = "material-icons custom"> turned_in </ i>	제출하다
<i class = "material-icons custom"> verified_user </ i>	확인 된 사용자
<i class = "material-icons custom"> view_agenda </ i>	view_agenda
<i class = "material-icons custom">보기 _ 배열 </ i>	view_array
<i class = "material-icons custom">보기 _ 캐 러셀 </ i>	view_carousel
<i class = "material-icons custom">보기 _ 열 </ i>	view_column
<i class = "material-icons custom"> view_day </ i>	view_day
<i class = "material-icons custom"> view_headline </ i>	view_headline
<i class = "material-icons custom">보기 _ 목록 </ i>	view_list
<i class = "material-icons custom"> view_module </ i>	view_module
<i class = "material-icons custom"> view_quilt </ i>	view_quilt
<i class = "material-icons custom"> view_stream </ i>	view_stream
<i class = "material-icons custom"> view_week </ i>	view_week
<i class = "material-icons custom"> 가시성 </ i>	시계
<i class = "material-icons custom"> visibility_off </ i>	가시성 _off
<i class = "material-icons custom"> 작업 </ i>	작업
<i class = "material-icons custom"> youtube_searched_for </ i>	youtube_searched_for
<i class = "material-icons custom"> 확대 </ i>	zoom_in
<i class = "material-icons custom"> zoom_out </ i>	축소

이 장에서는 Google의 (Material) Alert 아이콘 사용에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예에서와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

다음 표에는 Google의 (자료) 경고 아이콘의 사용 및 결과가 포함되어 있습니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	결과
<i class = "material-icons custom"> add_alert </ i>	add_alert
<i class = "material-icons custom"> 오류 </ i>	오류
<i class = "material-icons custom"> error_outline </ i>	error_outline
<i class = "material-icons custom"> 경고 </ i>	경고

이 장에서는 Google의 (Material) AV 아이콘 사용에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예에서와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

다음 표에는 Google의 (Material) AV 아이콘의 사용법과 결과가 포함되어 있습니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	결과
<i class = "material-icons custom"> airplay </ i>	방송
<i class = "material-icons custom"> 앨범 </ i>	앨범
<i class = "material-icons custom"> av_timer </ i>	av_timer
<i class = "material-icons custom"> closed_caption </ i>	closed_caption
<i class = "material-icons custom"> 이퀄라이저 </ i>	평형 장치
<i class = "material-icons custom"> 음란물 </ i>	명백한
<i class = "material-icons custom"> 빨리 감기 </ i>	빨리 감기
<i class = "material-icons custom"> 빨리 _ 되감기 </ i>	빨리 되감기
<i class = "material-icons custom"> forward_10 </ i>	forward_10
<i class = "material-icons custom"> forward_30 </ i>	forward_30
<i class = "material-icons custom"> forward_5 </ i>	forward_5
<i class = "material-icons custom"> 게임 </ i>	계략
<i class = "material-icons custom"> hd </ i>	HD
<i class = "material-icons custom"> 청각 </ i>	듣기
<i class = "material-icons custom"> 고품질 </ i>	고품질
<i class = "material-icons custom"> library_add </ i>	library_add
<i class = "material-icons custom"> library_books </ i>	도서관 _ 도서
<i class = "material-icons custom"> library_music </ i>	library_music
<i class = "material-icons custom"> 루프 </ i>	고리
<i class = "material-icons custom"> 마이크 </ i>	마이크
<i class = "material-icons custom"> mic_none </ i>	mic_none
<i class = "material-icons custom"> mic_off </ i>	mic_off
<i class = "material-icons custom"> 영화 </ i>	영화
<i class = "material-icons custom"> pause_circle_outline </ i>	pause_circle_outline
<i class = "material-icons custom"> 신규 _ 출시 </ i>	새로운 출시
<i class = "material-icons custom"> 관심 없음 </ i>	관심이 없다
<i class = "material-icons custom"> 일시 중지 </ i>	중지
<i class = "material-icons custom"> pause_circle_filled </ i>	pause_circle_filled
<i class = "material-icons custom"> play_arrow </ i>	play_arrow
<i class = "material-icons custom"> play_circle_filled </ i>	play_circle_filled
<i class = "material-icons custom"> play_circle_outline </ i>	play_circle_outline
<i class = "material-icons custom"> 재생 목록 _ 추가 </ i>	playlist_add
<i class = "material-icons custom"> 대기열 </ i>	열
<i class = "material-icons custom"> queue_music </ i>	queue_music
<i class = "material-icons custom"> 라디오 </ i>	라디오
<i class = "material-icons custom"> 최근 배우 </ i>	최근 _ 배우
<i class = "material-icons custom"> 반복 </ i>	반복
<i class = "material-icons custom"> repeat_one </ i>	repeat_one
<i class = "material-icons custom"> 재생 </ i>	다시 하다
<i class = "material-icons custom"> airplay </ i>	replay_10
<i class = "material-icons custom"> replay_30 </ i>	replay_30
<i class = "material-icons custom"> replay_5 </ i>	replay_5
<i class = "material-icons custom"> 셔플 </ i>	혼합
<i class = "material-icons custom"> skip_next </ i>	skip_next
<i class = "material-icons custom"> skip_previous </ i>	skip_previous
<i class = "material-icons custom"> 스누즈 </ i>	선잠
<i class = "material-icons custom"> sort_by_alpha </ i>	sort_by_alpha
<i class = "material-icons custom"> 중지 </ i>	중지
<i class = "material-icons custom"> 자막 </ i>	자막
<i class = "material-icons custom"> surround_sound </ i>	서라운드 사운드
<i class = "material-icons custom"> 비디오 라이브러리 </ i>	video_library
<i class = "material-icons custom"> 비디오 캠 </ i>	비디오 캠
<i class = "material-icons custom"> videocam_off </ i>	videocam_off
<i class = "material-icons custom"> 볼륨 감소 </ i>	volume_down
<i class = "material-icons custom"> volume_mute </ i>	volume_mute
<i class = "material-icons custom"> volume_off </ i>	volume_off
<i class = "material-icons custom"> volume_up </ i>	볼륨 업
<i class = "material-icons custom"> 웹 </ i>	편물

이 장에서는 Google의 (자료) 커뮤니케이션 아이콘 사용에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예에서와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

다음 표는 Google의 (자료) 커뮤니케이션 아이콘의 사용 및 결과를 포함합니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	결과
<i class = "material-icons custom"> 비즈니스 </ i>	사업
<i class = "material-icons custom"> 전화 </ i>	요구
<i class = "material-icons custom"> call_made </ i>	call_made
<i class = "material-icons custom"> 통화 _ 병합 </ i>	call_merge
<i class = "material-icons custom"> call_missed </ i>	call_missed
<i class = "material-icons custom"> call_received </ i>	call_received
<i class = "material-icons custom"> call_split </ i>	call_split
<i class = "material-icons custom"> 채팅 </ i>	잡담
<i class = "material-icons custom"> chat_bubble </ i>	chat_bubble
<i class = "material-icons custom"> chat_bubble_outline </ i>	chat_bubble_outline
<i class = "material-icons custom"> clear_all </ i>	clear_all
<i class = "material-icons custom"> 댓글 </ i>	논평
<i class = "material-icons custom"> contact_phone </ i>	연락 전화 번호
<i class = "material-icons custom"> 연락처 </ i>	콘택트 렌즈
<i class = "material-icons custom"> dialer_sip </ i>	dialer_sip
<i class = "material-icons custom"> 다이얼 패드 </ i>	다이얼 패드
<i class = "material-icons custom"> 포럼 </ i>	법정
<i class = "material-icons custom"> import_export </ i>	수입 수출
<i class = "material-icons custom"> invert_colors_off </ i>	invert_colors_off
<i class = "material-icons custom"> live_help </ i>	live_help
<i class = "material-icons custom"> location_off </ i>	location_off
<i class = "material-icons custom"> location_on </ i>	location_on
<i class = "material-icons custom"> 메시지 </ i>	메시지
<i class = "material-icons custom"> no_sim </ i>	no_sim
<i class = "material-icons custom"> 휴대 전화 </ i>	전화
<i class = "material-icons custom"> phonelink_erase </ i>	phonelink_erase
<i class = "material-icons custom"> phonelink_lock </ i>	phonelink_lock
<i class = "material-icons custom"> phonelink_ring </ i>	phonelink_ring
<i class = "material-icons custom"> phonelink_setup </ i>	phonelink_setup
<i class = "material-icons custom"> portable_wifi_off </ i>	portable_wifi_off
<i class = "material-icons custom"> present_to_all </ i>	present_to_all
<i class = "material-icons custom"> ring_volume </ i>	ring_volume
<i class = "material-icons custom"> 스피커 _ 전화 </ i>	speaker_phone
<i class = "material-icons custom"> stay_current_landscape </ i>	stay_current_landscape
<i class = "material-icons custom"> stay_current_portrait </ i>	stay_current_portrait
<i class = "material-icons custom"> stay_primary_landscape </ i>	stay_primary_landscape
<i class = "material-icons custom"> stay_primary_portrait </ i>	stay_primary_portrait
<i class = "material-icons custom"> swap_calls </ i>	swap_calls
<i class = "material-icons custom"> 텍스트 </ i>	문자
<i class = "material-icons custom"> 음성 메일 </ i>	음성 사서함
<i class = "material-icons custom"> vpn_key </ i>	vpn_key
<i class = "material-icons custom"> 이메일 </ i>	이메일
<i class = "material-icons custom"> call_end </ i>	call_end

이 장에서는 Google의 (자료) 콘텐츠 아이콘 사용에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예에서와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

다음 표에는 Google의 (자료) 콘텐츠 아이콘의 사용 및 결과가 포함되어 있습니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	결과
<i class = "material-icons custom"> 추가 </ i>	더하다
<i class = "material-icons custom"> add_box </ i>	add_box
<i class = "material-icons custom"> 원 추가 </ i>	add_circle
<i class = "material-icons custom"> add_circle_outline </ i>	add_circle_outline
<i class = "material-icons custom"> 아카이브 </ i>	아카이브
<i class = "material-icons custom"> 백 스페이스 </ i>	역행 키이
<i class = "material-icons custom"> 차단 </ i>	블록
<i class = "material-icons custom"> 지우기 </ i>	맑은
<i class = "material-icons custom"> content_copy </ i>	content_copy
<i class = "material-icons custom"> content_cut </ i>	content_cut
<i class = "material-icons custom"> content_paste </ i>	content_paste
<i class = "material-icons custom"> 만들기 </ i>	창조하다
<i class = "material-icons custom"> 초안 </ i>	체커
<i class = "material-icons custom"> 필터 _ 목록 </ i>	filter_list
<i class = "material-icons custom"> 플래그 </ i>	깃발
<i class = "material-icons custom"> font_download </ i>	font_download
<i class = "material-icons custom"> 전달 </ i>	앞으로
<i class = "material-icons custom"> 제스처 </ i>	몸짓
<i class = "material-icons custom">받은 편지함 </ i>	받은 편지함
<i class = "material-icons custom"> 링크 </ i>	링크
<i class = "material-icons custom"> 메일 </ i>	우편
<i class = "material-icons custom"> 읽지 않은 표시 </ i>	읽지 않은
<i class = "material-icons custom"> 다시 실행 </ i>	다시 하다
<i class = "material-icons custom"> 제거 </ i>	없애다
<i class = "material-icons custom"> 원형 제거 </ i>	remove_circle
<i class = "material-icons custom"> remove_circle_outline </ i>	remove_circle_outline
<i class = "material-icons custom"> 답장 </ i>	댓글
<i class = "material-icons custom"> reply_all </ i>	모든 응답
<i class = "material-icons custom"> 보고서 </ i>	보고서
<i class = "material-icons custom"> 저장 </ i>	저장
<i class = "material-icons custom"> select_all </ i>	select_all
<i class = "material-icons custom"> 보내기 </ i>	보내다
<i class = "material-icons custom"> 정렬 </ i>	종류
<i class = "material-icons custom"> text_format </ i>	text_format
<i class = "material-icons custom"> stay_current_portrait </ i>	stay_current_portrait
<i class = "material-icons custom"> 실행 취소 </ i>	실행 취소

이 장에서는 Google의 (Material) 장치 아이콘 사용에 대해 설명합니다. 그것을 가정custom 아래와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

다음 표에는 Google의 (재료) 장치 아이콘의 사용 및 결과가 포함되어 있습니다.

용법	결과
<i class = "material-icons custom"> access_alarm </ i>	access_alarm
<i class = "material-icons custom"> access_alarms </ i>	access_alarms
<i class = "material-icons custom"> access_time </ i>	액세스 _ 시간
<i class = "material-icons custom"> add_alarm </ i>	add_alarm
<i class = "material-icons custom"> 비행기 모드 _ 활성 </ i>	planemode_active
<i class = "material-icons custom"> 비행기 모드 _ 비활성 </ i>	planemode_inactive
<i class = "material-icons custom"> battery_alert </ i>	battery_alert
<i class = "material-icons custom"> battery_charging_full </ i>	battery_charging_full
<i class = "material-icons custom"> battery_full </ i>	battery_full
<i class = "material-icons custom"> battery_std </ i>	battery_std
<i class = "material-icons custom"> battery_unknown </ i>	battery_unknown
<i class = "material-icons custom"> 블루투스 </ i>	블루투스
<i class = "material-icons custom"> bluetooth_connected </ i>	bluetooth_connected
<i class = "material-icons custom"> bluetooth_disabled </ i>	bluetooth_disabled
<i class = "material-icons custom"> bluetooth_searching </ i>	bluetooth_searching
<i class = "material-icons custom"> 밝기 _ 자동 </ i>	밝기 _ 자동
<i class = "material-icons custom"> 밝기 _ 높음 </ i>	밝기 _ 높음
<i class = "material-icons custom"> 밝기 _ 낮음 </ i>	밝기 _ 낮음
<i class = "material-icons custom"> 밝기 _ 중간 </ i>	밝기 _ 중간
<i class = "material-icons custom"> data_usage </ i>	data_usage
<i class = "material-icons custom"> developer_mode </ i>	개발자 모드
<i class = "material-icons custom"> 기기 </ i>	장치
<i class = "material-icons custom"> dvr </ i>	dvr
<i class = "material-icons custom"> gps_fixed </ i>	gps_fixed
<i class = "material-icons custom"> gps_not_fixed </ i>	gps_not_fixed
<i class = "material-icons custom"> gps_off </ i>	gps_off
<i class = "material-icons custom"> graphic_eq </ i>	graphic_eq
<i class = "material-icons custom"> location_disabled </ i>	location_disabled
<i class = "material-icons custom"> 위치 _ 검색 </ i>	location_searching
<i class = "material-icons custom"> network_cell </ i>	network_cell
<i class = "material-icons custom"> network_wifi </ i>	network_wifi
<i class = "material-icons custom"> screen_lock_landscape </ i>	screen_lock_landscape
<i class = "material-icons custom"> screen_lock_portrait </ i>	screen_lock_portrait
<i class = "material-icons custom"> 화면 _ 잠금 _ 회전 </ i>	screen_lock_rotation
<i class = "material-icons custom"> 화면 _ 회전 </ i>	화면 _ 회전
<i class = "material-icons custom"> sd_storage </ i>	sd_storage
<i class = "material-icons custom"> settings_system_daydream </ i>	settings_system_daydream
<i class = "material-icons custom"> signal_cellular_4_bar </ i>	signal_cellular_4_bar
<i class = "material-icons custom"> wifi_tethering </ i>	wifi_tethering
<i class = "material-icons custom"> signal_cellular_no_sim </ i>	signal_cellular_no_sim
<i class = "material-icons custom"> signal_cellular_null </ i>	signal_cellular_null
<i class = "material-icons custom"> signal_cellular_off </ i>	signal_cellular_off
<i class = "material-icons custom"> signal_wifi_4_bar </ i>	signal_wifi_4_bar
<i class = "material-icons custom"> signal_wifi_4_bar_lock </ i>	signal_wifi_4_bar_lock
<i class = "material-icons custom"> signal_wifi_off </ i>	signal_wifi_off
<i class = "material-icons custom"> 저장 </ i>	저장
<i class = "material-icons custom"> usb </ i>	USB
<i class = "material-icons custom"> 배경 무늬 </ i>	벽지
<i class = "material-icons custom"> 위젯 </ i>	위젯
<i class = "material-icons custom"> wifi_lock </ i>	wifi_lock
<i class = "material-icons custom"> signal_cellular_connected_no_internet_4_bar </ i>	signal_cellular_connected_no_internet_4_bar

이 장에서는 Google의 (Material) Editor 아이콘 사용에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예에서와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

다음 표에는 Google의 (Material) Editor 아이콘의 사용법과 결과가 포함되어 있습니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	결과
<i class = "material-icons custom"> 첨부 파일 </ i>	파일을 첨부
<i class = "material-icons custom"> attach_money </ i>	attach_money
<i class = "material-icons custom"> border_all </ i>	border_all
<i class = "material-icons custom"> border_bottom </ i>	border_bottom
<i class = "material-icons custom"> border_clear </ i>	border_clear
<i class = "material-icons custom"> border_color </ i>	border_color
<i class = "material-icons custom"> border_horizontal </ i>	border_horizontal
<i class = "material-icons custom"> border_inner </ i>	border_inner
<i class = "material-icons custom"> border_left </ i>	border_left
<i class = "material-icons custom"> border_outer </ i>	border_outer
<i class = "material-icons custom"> border_right </ i>	border_right
<i class = "material-icons custom"> 테두리 _ 스타일 </ i>	border_style
<i class = "material-icons custom"> border_top </ i>	border_top
<i class = "material-icons custom"> border_vertical </ i>	border_vertical
<i class = "material-icons custom"> format_align_center </ i>	format_align_center
<i class = "material-icons custom"> format_align_justify </ i>	format_align_justify
<i class = "material-icons custom"> format_align_left </ i>	format_align_left
<i class = "material-icons custom"> format_align_right </ i>	format_align_right
<i class = "material-icons custom"> format_bold </ i>	format_bold
<i class = "material-icons custom"> 형식 _ 지우기 </ i>	format_clear
<i class = "material-icons custom"> format_color_fill </ i>	format_color_fill
<i class = "material-icons custom"> format_color_reset </ i>	format_color_reset
<i class = "material-icons custom"> 형식 _ 색상 _ 텍스트 </ i>	format_color_text
<i class = "material-icons custom"> format_indent_decrease </ i>	format_indent_decrease
<i class = "material-icons custom"> format_indent_increase </ i>	format_indent_increase
<i class = "material-icons custom"> format_italic </ i>	format_italic
<i class = "material-icons custom"> format_line_spacing </ i>	format_line_spacing
<i class = "material-icons custom"> format_list_bulleted </ i>	format_list_bulleted
<i class = "material-icons custom"> 형식 _ 목록 _ 번호 </ i>	format_list_numbered
<i class = "material-icons custom"> format_paint </ i>	format_paint
<i class = "material-icons custom"> format_quote </ i>	format_quote
<i class = "material-icons custom"> 형식 _ 크기 </ i>	형식 _ 크기
<i class = "material-icons custom"> 형식 _ 취소 선 </ i>	format_strikethrough
<i class = "material-icons custom"> format_textdirection_l_to_r </ i>	format_textdirection_l_to_r
<i class = "material-icons custom"> format_textdirection_r_to_l </ i>	format_textdirection_r_to_l
<i class = "material-icons custom"> format_underline </ i>	format_underline
<i class = "material-icons custom"> 기능 </ i>	기능
<i class = "material-icons custom"> 삽입 _ 차트 </ i>	insert_chart
<i class = "material-icons custom"> 댓글 삽입 </ i>	삽입 _ 코멘트
<i class = "material-icons custom"> insert_drive_file </ i>	insert_drive_file
<i class = "material-icons custom"> 이모티콘 삽입 </ i>	삽입 _ 이모티콘
<i class = "material-icons custom"> 초대 _ 삽입 </ i>	insert_invitation
<i class = "material-icons custom"> 삽입 _ 링크 </ i>	삽입 _ 링크
<i class = "material-icons custom"> 사진 삽입 </ i>	사진 삽입
<i class = "material-icons custom"> merge_type </ i>	merge_type
<i class = "material-icons custom"> mode_comment </ i>	mode_comment
<i class = "material-icons custom"> mode_edit </ i>	mode_edit
<i class = "material-icons custom"> money_off </ i>	money_off
<i class = "material-icons custom"> 게시 </ i>	출판하다
<i class = "material-icons custom"> 스페이스 바 </ i>	스페이스 바
<i class = "material-icons custom"> 취소 선 </ i>	취소 선 _ 초
<i class = "material-icons custom"> vertical_align_bottom </ i>	vertical_align_bottom
<i class = "material-icons custom"> vertical_align_center </ i>	vertical_align_center
<i class = "material-icons custom"> vertical_align_top </ i>	vertical_align_top
<i class = "material-icons custom"> wrap_text </ i>	wrap_text

이 장에서는 Google의 (Material) 파일 아이콘 사용에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예에서와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

다음 표에는 Google의 (자료) 파일 아이콘의 사용법과 결과가 포함되어 있습니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	결과
<i class = "material-icons custom"> 첨부 </ i>	부착
<i class = "material-icons custom"> 클라우드 </ i>	구름
<i class = "material-icons custom"> cloud_circle </ i>	cloud_circle
<i class = "material-icons custom"> cloud_done </ i>	cloud_done
<i class = "material-icons custom"> cloud_download </ i>	cloud_download
<i class = "material-icons custom"> cloud_off </ i>	cloud_off
<i class = "material-icons custom"> cloud_queue </ i>	cloud_queue
<i class = "material-icons custom"> cloud_upload </ i>	cloud_upload
<i class = "material-icons custom"> file_download </ i>	파일 다운로드
<i class = "material-icons custom"> 파일 _ 업로드 </ i>	파일 업로드
<i class = "material-icons custom"> 폴더 </ i>	폴더
<i class = "material-icons custom"> folder_open </ i>	folder_open
<i class = "material-icons custom"> folder_shared </ i>	folder_shared

이 장에서는 Google의 (Material) 하드웨어 아이콘 사용에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예에서와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

다음 표에는 Google의 (자료) 하드웨어 아이콘의 사용법과 결과가 포함되어 있습니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	결과
<i class = "material-icons custom"> 캐스트 </ i>	캐스트
<i class = "material-icons custom"> cast_connected </ i>	cast_connected
<i class = "material-icons custom"> 컴퓨터 </ i>	컴퓨터
<i class = "material-icons custom"> desktop_mac </ i>	desktop_mac
<i class = "material-icons custom"> desktop_windows </ i>	desktop_windows
<i class = "material-icons custom"> 개발자 _ 보드 </ i>	개발자 _ 보드
<i class = "material-icons custom"> device_hub </ i>	device_hub
<i class = "material-icons custom"> 도킹 </ i>	독
<i class = "material-icons custom"> 게임 패드 </ i>	게임 패드
<i class = "material-icons custom"> 헤드셋 </ i>	헤드폰
<i class = "material-icons custom"> headset_mic </ i>	headset_mic
<i class = "material-icons custom"> 키보드 </ i>	건반
<i class = "material-icons custom"> keyboard_arrow_down </ i>	keyboard_arrow_down
<i class = "material-icons custom"> keyboard_arrow_left </ i>	keyboard_arrow_left
<i class = "material-icons custom"> keyboard_arrow_right </ i>	keyboard_arrow_right
<i class = "material-icons custom"> keyboard_arrow_up </ i>	keyboard_arrow_up
<i class = "material-icons custom"> keyboard_backspace </ i>	keyboard_backspace
<i class = "material-icons custom"> keyboard_capslock </ i>	keyboard_capslock
<i class = "material-icons custom"> keyboard_hide </ i>	keyboard_hide
<i class = "material-icons custom"> keyboard_return </ i>	keyboard_return
<i class = "material-icons custom"> keyboard_tab </ i>	keyboard_tab
<i class = "material-icons custom"> keyboard_voice </ i>	keyboard_voice
<i class = "material-icons custom"> 노트북 </ i>	노트북
<i class = "material-icons custom"> laptop_chromebook </ i>	laptop_chromebook
<i class = "material-icons custom"> laptop_mac </ i>	laptop_mac
<i class = "material-icons custom"> laptop_windows </ i>	노트북 _ 창
<i class = "material-icons custom"> 메모리 </ i>	기억
<i class = "material-icons custom"> 마우스 </ i>	쥐
<i class = "material-icons custom"> phone_android </ i>	phone_android
<i class = "material-icons custom"> phone_iphone </ i>	phone_iphone
<i class = "material-icons custom"> 전화 링크 </ i>	phonelink
<i class = "material-icons custom"> phonelink_off </ i>	phonelink_off
<i class = "material-icons custom"> 전원 _ 입력 </ i>	전원 입력
<i class = "material-icons custom"> 라우터 </ i>	라우터
<i class = "material-icons custom"> 스캐너 </ i>	스캐너
<i class = "material-icons custom"> 보안 </ i>	보안
<i class = "material-icons custom"> sim_card </ i>	SIM 카드
<i class = "material-icons custom"> 스마트 폰 </ i>	스마트 폰
<i class = "material-icons custom"> 스피커 </ i>	스피커
<i class = "material-icons custom"> 스피커 _ 그룹 </ i>	스피커 _ 그룹
<i class = "material-icons custom"> 태블릿 </ i>	태블릿
<i class = "material-icons custom"> tablet_android </ i>	tablet_android
<i class = "material-icons custom"> tablet_mac </ i>	tablet_mac
<i class = "material-icons custom"> 장난감 </ i>	장난감
<i class = "material-icons custom"> TV </ i>	TV
<i class = "material-icons custom">보기 </ i>	손목 시계

이 장에서는 Google의 (Material) 이미지 아이콘 사용에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예에서와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

다음 표에는 Google의 (자료) 이미지 아이콘의 사용 및 결과가 포함되어 있습니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	결과
<i class = "material-icons custom"> 사진에 _ 추가 </ i>	add_to_photos
<i class = "material-icons custom"> 조정 </ i>	맞추다
<i class = "material-icons custom"> 도우미 </ i>	조수
<i class = "material-icons custom"> 도우미 </ i>	조수
<i class = "material-icons custom"> 오디오 트랙 </ i>	오디오 트랙
<i class = "material-icons custom"> blur_circular </ i>	blur_circular
<i class = "material-icons custom"> blur_linear </ i>	blur_linear
<i class = "material-icons custom"> blur_off </ i>	blur_off
<i class = "material-icons custom"> blur_on </ i>	blur_on
<i class = "material-icons custom"> 밝기 _1 </ i>	밝기 _1
<i class = "material-icons custom"> 밝기 _2 </ i>	밝기 _2
<i class = "material-icons custom"> 밝기 _3 </ i>	밝기 _3
<i class = "material-icons custom"> 밝기 _4 </ i>	밝기 _4
<i class = "material-icons custom"> 밝기 _5 </ i>	밝기 _5
<i class = "material-icons custom"> 밝기 _6 </ i>	밝기 _6
<i class = "material-icons custom"> 밝기 _7 </ i>	밝기 _7
<i class = "material-icons custom"> 깨진 이미지 </ i>	broken_image
<i class = "material-icons custom"> 브러시 </ i>	브러시
<i class = "material-icons custom"> 카메라 </ i>	카메라
<i class = "material-icons custom"> camera_alt </ i>	camera_alt
<i class = "material-icons custom"> camera_front </ i>	camera_front
<i class = "material-icons custom"> 카메라 _ 후면 </ i>	camera_rear
<i class = "material-icons custom"> camera_roll </ i>	카메라 롤
<i class = "material-icons custom"> center_focus_strong </ i>	center_focus_strong
<i class = "material-icons custom"> center_focus_weak </ i>	center_focus_weak
<i class = "material-icons custom"> 컬렉션 </ i>	컬렉션
<i class = "material-icons custom"> 컬렉션 _ 북마크 </ i>	collections_bookmark
<i class = "material-icons custom"> color_lens </ i>	color_lens
<i class = "material-icons custom"> 색칠 </ i>	채색하다
<i class = "material-icons custom"> 비교 </ i>	비교
<i class = "material-icons custom"> control_point </ i>	제어점
<i class = "material-icons custom"> control_point_duplicate </ i>	control_point_duplicate
<i class = "material-icons custom"> 자르기 </ i>	수확고
<i class = "material-icons custom"> crop_16_9 </ i>	crop_16_9
<i class = "material-icons custom"> crop_3_2 </ i>	crop_3_2
<i class = "material-icons custom"> crop_5_4 </ i>	crop_5_4
<i class = "material-icons custom"> crop_7_5 </ i>	crop_7_5
<i class = "material-icons custom"> crop_din </ i>	crop_din
<i class = "material-icons custom"> crop_free </ i>	무 작물
<i class = "material-icons custom"> crop_landscape </ i>	crop_landscape
<i class = "material-icons custom"> crop_original </ i>	crop_original
<i class = "material-icons custom"> crop_portrait </ i>	crop_portrait
<i class = "material-icons custom"> crop_square </ i>	crop_square
<i class = "material-icons custom"> 디 헤이즈 </ i>	디 헤이즈
<i class = "material-icons custom"> 세부 정보 </ i>	세부
<i class = "material-icons custom"> 수정 </ i>	편집하다
<i class = "material-icons custom"> 노출 </ i>	노출
<i class = "material-icons custom"> exposure_neg_1 </ i>	exposure_neg_1
<i class = "material-icons custom"> exposure_plus_1 </ i>	노출 _ 플러스 _1
<i class = "material-icons custom"> exposure_plus_2 </ i>	exposure_plus_2
<i class = "material-icons custom"> exposure_zero </ i>	노출 _ 제로
<i class = "material-icons custom"> 필터 </ i>	필터
<i class = "material-icons custom"> filter_1 </ i>	filter_1
<i class = "material-icons custom"> filter_2 </ i>	filter_2
<i class = "material-icons custom"> filter_3 </ i>	filter_3
<i class = "material-icons custom"> 필터 _4 </ i>	filter_4
<i class = "material-icons custom"> filter_5 </ i>	filter_5
<i class = "material-icons custom"> filter_6 </ i>	filter_6
<i class = "material-icons custom"> filter_7 </ i>	filter_7
<i class = "material-icons custom"> filter_8 </ i>	filter_8
<i class = "material-icons custom"> filter_9 </ i>	filter_9
<i class = "material-icons custom"> filter_9_plus </ i>	filter_9_plus
<i class = "material-icons custom"> filter_b_and_w </ i>	filter_b_and_w
<i class = "material-icons custom"> filter_center_focus </ i>	filter_center_focus
<i class = "material-icons custom"> filter_drama </ i>	filter_drama
<i class = "material-icons custom"> 필터 _ 프레임 </ i>	filter_frames
<i class = "material-icons custom"> filter_hdr </ i>	filter_hdr
<i class = "material-icons custom"> filter_none </ i>	filter_none
<i class = "material-icons custom"> filter_tilt_shift </ i>	filter_tilt_shift
<i class = "material-icons custom"> filter_vintage </ i>	filter_vintage
<i class = "material-icons custom"> 플레어 </ i>	플레어
<i class = "material-icons custom"> flash_auto </ i>	flash_auto
<i class = "material-icons custom"> flash_off </ i>	flash_off
<i class = "material-icons custom"> flash_on </ i>	flash_on
<i class = "material-icons custom"> 플립 </ i>	튀기다
<i class = "material-icons custom"> 그라데이션 </ i>	구배
<i class = "material-icons custom"> 그레인 </ i>	곡물
<i class = "material-icons custom"> grid_off </ i>	grid_off
<i class = "material-icons custom"> grid_on </ i>	grid_on
<i class = "material-icons custom"> hdr_off </ i>	hdr_off
<i class = "material-icons custom"> hdr_on </ i>	hdr_on
<i class = "material-icons custom"> hdr_strong </ i>	hdr_strong
<i class = "material-icons custom"> hdr_weak </ i>	hdr_weak
<i class = "material-icons custom"> 치유 </ i>	치유
<i class = "material-icons custom"> 이미지 </ i>	영상
<i class = "material-icons custom"> 이미지 _ 종횡비 </ i>	image_aspect_ratio
<i class = "material-icons custom"> iso </ i>	iso
<i class = "material-icons custom"> 가로 </ i>	경치
<i class = "material-icons custom"> leak_add </ i>	누출 _ 추가
<i class = "material-icons custom"> leak_remove </ i>	누수 제거
<i class = "material-icons custom"> 렌즈 </ i>	렌즈
<i class = "material-icons custom"> 모양 </ i>	외모
<i class = "material-icons custom"> looks_3 </ i>	looks_3
<i class = "material-icons custom"> 외모 _4 </ i>	look_4
<i class = "material-icons custom"> looks_5 </ i>	looks_5
<i class = "material-icons custom"> looks_6 </ i>	looks_6
<i class = "material-icons custom"> looks_one </ i>	look_one
<i class = "material-icons custom"> looks_two </ i>	look_two
<i class = "material-icons custom"> 확대경 </ i>	루페
<i class = "material-icons custom"> monochrome_photos </ i>	흑백 사진
<i class = "material-icons custom"> movie_creation </ i>	movie_creation
<i class = "material-icons custom"> music_note </ i>	음악 노트
<i class = "material-icons custom"> 자연 </ i>	자연
<i class = "material-icons custom"> nature_people </ i>	자연 _ 사람
<i class = "material-icons custom"> wb_sunny </ i>	wb_sunny
<i class = "material-icons custom"> navigate_next </ i>	navigate_next
<i class = "material-icons custom"> navigate_before </ i>	navigate_before
<i class = "material-icons custom"> 팔레트 </ i>	팔레트
<i class = "material-icons custom"> 파노라마 </ i>	파노라마
<i class = "material-icons custom"> panorama_fish_eye </ i>	panorama_fish_eye
<i class = "material-icons custom"> panorama_horizontal </ i>	panorama_horizontal
<i class = "material-icons custom"> panorama_vertical </ i>	panorama_vertical
<i class = "material-icons custom"> panorama_wide_angle </ i>	panorama_wide_angle
<i class = "material-icons custom"> 사진 </ i>	사진
<i class = "material-icons custom"> 사진 _ 앨범 </ i>	photo_album
<i class = "material-icons custom"> 사진 _ 카메라 </ i>	사진기
<i class = "material-icons custom"> 사진 _ 라이브러리 </ i>	photo_library
<i class = "material-icons custom"> 사진 _ 크기 _ 선택 _ 실제 </ i>	photo_size_select_actual
<i class = "material-icons custom"> photo_size_select_large </ i>	photo_size_select_large
<i class = "material-icons custom"> photo_size_select_small </ i>	photo_size_select_small
<i class = "material-icons custom"> picture_as_pdf </ i>	picture_as_pdf
<i class = "material-icons custom"> 세로 </ i>	초상화
<i class = "material-icons custom"> remove_red_eye </ i>	remove_red_eye
<i class = "material-icons custom"> rotate_90_degrees_ccw </ i>	rotate_90_degrees_ccw
<i class = "material-icons custom"> 왼쪽으로 회전 </ i>	rotate_left
<i class = "material-icons custom"> 오른쪽으로 회전 </ i>	rotate_right
<i class = "material-icons custom"> 슬라이드 쇼 </ i>	슬라이드 쇼
<i class = "material-icons custom"> 직선화 </ i>	바르게 되다
<i class = "material-icons custom"> 스타일 </ i>	스타일
<i class = "material-icons custom"> switch_camera </ i>	switch_camera
<i class = "material-icons custom"> switch_video </ i>	switch_video
<i class = "material-icons custom"> tag_faces </ i>	tag_faces
<i class = "material-icons custom"> 텍스처 </ i>	조직
<i class = "material-icons custom"> 타임 랩스 </ i>	저속 촬영
<i class = "material-icons custom"> 타이머 </ i>	시간제 노동자
<i class = "material-icons custom"> timer_10 </ i>	timer_10
<i class = "material-icons custom"> timer_3 </ i>	timer_3
<i class = "material-icons custom"> timer_off </ i>	timer_off
<i class = "material-icons custom"> 색조 </ i>	색조
<i class = "material-icons custom"> 변환 </ i>	변환
<i class = "material-icons custom"> 조정 </ i>	곡조
<i class = "material-icons custom">보기 _ 편안함 </ i>	view_comfy
<i class = "material-icons custom"> view_compact </ i>	view_compact
<i class = "material-icons custom"> 비 네트 </ i>	삽화
<i class = "material-icons custom"> wb_auto </ i>	wb_auto
<i class = "material-icons custom"> wb_cloudy </ i>	wb_cloudy
<i class = "material-icons custom"> wb_ 백열등 </ i>	wb_incandescent
<i class = "material-icons custom"> wb_ 무지개 </ i>	wb_iridescent

이 장에서는 Google의 (Material) Maps 아이콘 사용에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예에서와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

다음 표에는 Google의 (자료)지도 아이콘의 사용 및 결과가 포함되어 있습니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	결과
<i class = "material-icons custom"> 여기 </ i>	여기 있었다
<i class = "material-icons custom"> 오시는 길 </ i>	지도
<i class = "material-icons custom"> directions_bike </ i>	방향 _ 자전거
<i class = "material-icons custom"> directions_boat </ i>	방향 _ 보트
<i class = "material-icons custom"> 길 찾기 _ 버스 </ i>	방향 _ 버스
<i class = "material-icons custom"> 방향 _ 자동차 </ i>	방향 _ 자동차
<i class = "material-icons custom"> 길 찾기 _ 철도 </ i>	방향 _ 철도
<i class = "material-icons custom"> 방향 _ 실행 </ i>	길 찾기 _ 달리기
<i class = "material-icons custom"> 길 찾기 _ 지하철 </ i>	길 찾기 _ 지하철
<i class = "material-icons custom"> 길 찾기 _ 운송 </ i>	Direction_transit
<i class = "material-icons custom"> directions_walk </ i>	Direction_walk
<i class = "material-icons custom"> 비행 </ i>	비행
<i class = "material-icons custom"> 호텔 </ i>	호텔
<i class = "material-icons custom"> 레이어 </ i>	레이어
<i class = "material-icons custom"> layers_clear </ i>	layer_clear
<i class = "material-icons custom"> local_activity </ i>	local_activity
<i class = "material-icons custom"> local_airport </ i>	local_airport
<i class = "material-icons custom"> local_atm </ i>	local_atm
<i class = "material-icons custom"> local_bar </ i>	local_bar
<i class = "material-icons custom"> local_cafe </ i>	local_cafe
<i class = "material-icons custom"> local_car_wash </ i>	local_car_wash
<i class = "material-icons custom"> local_convenience_store </ i>	local_convenience_store
<i class = "material-icons custom"> 현지 _ 식당 </ i>	local_dining
<i class = "material-icons custom"> local_drink </ i>	지역 음료
<i class = "material-icons custom"> local_florist </ i>	local_florist
<i class = "material-icons custom"> 현지 _ 주유소 </ i>	지역 _ 주유소
<i class = "material-icons custom"> local_grocery_store </ i>	local_grocery_store
<i class = "material-icons custom"> local_hospital </ i>	지역 병원
<i class = "material-icons custom"> 지역 _ 호텔 </ i>	local_hotel
<i class = "material-icons custom"> local_laundry_service </ i>	local_laundry_service
<i class = "material-icons custom"> 로컬 _ 라이브러리 </ i>	지역 도서관
<i class = "material-icons custom"> local_mall </ i>	local_mall
<i class = "material-icons custom"> local_movies </ i>	local_movies
<i class = "material-icons custom"> local_offer </ i>	local_offer
<i class = "material-icons custom"> local_parking </ i>	local_parking
<i class = "material-icons custom"> local_pharmacy </ i>	지역 약국
<i class = "material-icons custom"> local_phone </ i>	local_phone
<i class = "material-icons custom"> local_pizza </ i>	local_pizza
<i class = "material-icons custom"> local_play </ i>	local_play
<i class = "material-icons custom"> local_post_office </ i>	local_post_office
<i class = "material-icons custom"> local_printshop </ i>	local_printshop
<i class = "material-icons custom"> local_see </ i>	local_see
<i class="material-icons custom">local_shipping</i>	local_shipping
<i class="material-icons custom">local_taxi</i>	local_taxi
<i class="material-icons custom">map</i>	map
<i class="material-icons custom">my_location</i>	my_location
<i class="material-icons custom">navigation</i>	navigation
<i class="material-icons custom">person_pin</i>	person_pin
<i class="material-icons custom">pin_drop</i>	pin_drop
<i class="material-icons custom">place</i>	place
<i class="material-icons custom">rate_review</i>	rate_review
<i class="material-icons custom">restaurant_menu</i>	restaurant_menu
<i class="material-icons custom">satellite</i>	satellite
<i class="material-icons custom">store_mall_directory</i>	store_mall_directory
<i class="material-icons custom">traffic</i>	traffic
<i class="material-icons custom">terrain</i>	terrain

This chapter explains the usage of Google's (Material) Navigation icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) Navigation icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="material-icons custom">apps</i>	apps
<i class="material-icons custom">arrow_back</i>	arrow_back
<i class="material-icons custom">arrow_drop_down</i>	arrow_drop_down
<i class="material-icons custom">arrow_drop_down_circle</i>	arrow_drop_down_circle
<i class="material-icons custom">arrow_drop_up</i>	arrow_drop_up
<i class="material-icons custom">arrow_forward</i>	arrow_forward
<i class="material-icons custom">cancel</i>	cancel
<i class="material-icons custom">check</i>	check
<i class="material-icons custom">chevron_left</i>	chevron_left
<i class="material-icons custom">chevron_right</i>	chevron_right
<i class="material-icons custom">close</i>	close
<i class="material-icons custom">expand_less</i>	expand_less
<i class="material-icons custom">expand_more</i>	expand_more
<i class="material-icons custom">fullscreen</i>	fullscreen
<i class="material-icons custom">fullscreen_exit</i>	fullscreen_exit
<i class="material-icons custom">menu</i>	menu
<i class="material-icons custom">more_horiz</i>	more_horiz
<i class="material-icons custom">more_vert</i>	more_vert
<i class="material-icons custom">refresh</i>	refresh

This chapter explains the usage of Google's (Material) Notification icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) Notification icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="material-icons custom">adb</i>	adb
<i class="material-icons custom">airline_seat_flat</i>	airline_seat_flat
<i class="material-icons custom">airline_seat_flat_angled</i>	airline_seat_flat_angled
<i class="material-icons custom">airline_seat_individual_suite</i>	airline_seat_individual_suite
<i class="material-icons custom">airline_seat_legroom_reduced</i>	airline_seat_legroom_reduced
<i class="material-icons custom">airline_seat_recline_extra</i>	airline_seat_recline_extra
<i class="material-icons custom">airline_seat_recline_normal</i>	airline_seat_recline_normal
<i class="material-icons custom">bluetooth_audio</i>	bluetooth_audio
<i class="material-icons custom">confirmation_number</i>	confirmation_number
<i class="material-icons custom">disc_full</i>	disc_full
<i class="material-icons custom">do_not_disturb</i>	do_not_disturb
<i class="material-icons custom">do_not_disturb_alt</i>	do_not_disturb_alt
<i class="material-icons custom">drive_eta</i>	drive_eta
<i class="material-icons custom">event_available</i>	event_available
<i class="material-icons custom">event_busy</i>	event_busy
<i class="material-icons custom">event_note</i>	event_note
<i class="material-icons custom">folder_special</i>	folder_special
<i class="material-icons custom">live_tv</i>	live_tv
<i class="material-icons custom">mms</i>	mms
<i class="material-icons custom">more</i>	more
<i class="material-icons custom">network_locked</i>	network_locked
<i class="material-icons custom">ondemand_video</i>	ondemand_video
<i class="material-icons custom">personal_video</i>	personal_video
<i class="material-icons custom">phone_bluetooth_speaker</i>	phone_bluetooth_speaker
<i class="material-icons custom">phone_forwarded</i>	phone_forwarded
<i class="material-icons custom">phone_in_talk</i>	phone_in_talk
<i class="material-icons custom">phone_locked</i>	phone_locked
<i class="material-icons custom">phone_missed</i>	phone_missed
<i class="material-icons custom">phone_paused</i>	phone_paused
<i class="material-icons custom">power</i>	power
<i class="material-icons custom">sd_card</i>	sd_card
<i class="material-icons custom">sim_card_alert</i>	sim_card_alert
<i class="material-icons custom">sms</i>	sms
<i class="material-icons custom">sms_failed</i>	sms_failed
<i class="material-icons custom">sync</i>	sync
<i class="material-icons custom">sync_disabled</i>	sync_disabled
<i class="material-icons custom">sync_problem</i>	sync_problem
<i class="material-icons custom">system_update</i>	system_update
<i class="material-icons custom">tap_and_play</i>	tap_and_play
<i class="material-icons custom">time_to_leave</i>	time_to_leave
<i class="material-icons custom">vibration</i>	vibration
<i class="material-icons custom">voice_chat</i>	voice_chat
<i class="material-icons custom">vpn_lock</i>	vpn_lock
<i class="material-icons custom">wc</i>	wc
<i class="material-icons custom">wifi</i>	wifi

이 장에서는 Google의 (Material) Social 아이콘 사용에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예에서와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

다음 표에는 Google의 (Material) Social 아이콘 사용 및 결과가 포함되어 있습니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	결과
<i class = "material-icons custom"> 케이크 </ i>	케이크
<i class = "material-icons custom"> 도메인 </ i>	도메인
<i class = "material-icons custom"> 그룹 </ i>	그룹
<i class = "material-icons custom"> group_add </ i>	group_add
<i class = "material-icons custom"> location_city </ i>	location_city
<i class = "material-icons custom"> 분위기 </ i>	기분
<i class = "material-icons custom"> mood_bad </ i>	기분 나쁜
<i class = "material-icons custom"> 알림 </ i>	알림
<i class = "material-icons custom"> notifications_active </ i>	notification_active
<i class = "material-icons custom"> 알림 _ 없음 </ i>	notification_none
<i class = "material-icons custom"> notifications_off </ i>	notification_off
<i class = "material-icons custom"> notifications_paused </ i>	notification_paused
<i class = "material-icons custom"> 페이지 </ i>	페이지
<i class = "material-icons custom"> party_mode </ i>	파티 모드
<i class = "material-icons custom"> 사람 </ i>	사람들
<i class = "material-icons custom"> people_outline </ i>	people_outline
<i class = "material-icons custom"> 사람 </ i>	사람
<i class = "material-icons custom"> person_add </ i>	person_add
<i class = "material-icons custom"> person_outline </ i>	person_outline
<i class = "material-icons custom"> plus_one </ i>	하나 추가
<i class = "material-icons custom"> 설문 조사 </ i>	투표
<i class = "material-icons custom"> 공개 </ i>	공공의
<i class = "material-icons custom"> 학교 </ i>	학교
<i class = "material-icons custom"> 공유 </ i>	공유
<i class = "material-icons custom"> whatshot </ i>	Whatshot

이 장에서는 Google의 (Material) Toggle 아이콘 사용에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예에서와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel =  "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

다음 표에는 Google의 (Material) Toggle 아이콘의 사용법과 결과가 포함되어 있습니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	결과
<i class = "material-icons custom"> 체크 박스 </ i>	체크 박스
<i class = "material-icons custom"> check_box_outline_blank </ i>	check_box_outline_blank
<i class = "material-icons custom"> indeterminate_check_box </ i>	indeterminate_check_box
<i class = "material-icons custom"> radio_button_checked </ i>	radio_button_checked
<i class = "material-icons custom"> radio_button_unchecked </ i>	radio_button_unchecked
<i class = "material-icons custom"> 별표 </ i>	별
<i class = "material-icons custom"> star_border </ i>	star_border
<i class = "material-icons custom"> star_half </ i>	star_half

래스터 이미지 형식, 벡터 이미지 형식 및 글꼴로 사용할 수있는 단색 아이콘 라이브러리입니다. 250 개 이상의 글리프를 글꼴 형식으로 제공합니다. 웹 프로젝트에서 이러한 글꼴을 사용할 수 있습니다. 이 글리프는 무료가 아니지만 부트 스트랩 기반 프로젝트에서 사용하는 경우에 대비하여 아무것도 지출 할 필요가 없다면 사용할 수 있습니다.

글꼴로드 (라이브러리)

Bootstrap Glyphicons 라이브러리를로드하려면 웹 페이지의 <head> 섹션에 다음 줄을 복사하여 붙여 넣으십시오.

<head>
   <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>

아이콘 사용

Bootstrap Glyphicons는 여러 아이콘을 제공합니다. 그중 하나를 선택하고 <body> 태그 내의 HTML 요소에 아이콘 클래스의 이름을 추가하십시오. 다음 예에서는 트리 아이콘을 사용했으며 클래스 이름은tree-deciduous.

<html>
   <head>
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>
	
   <body>
      <i class = "glyphicon glyphicon-tree-deciduous"> </i>
   </body>
</html>

다음 출력을 생성합니다-

크기 정의

CSS에서 크기를 정의하고 아래와 같이 클래스 이름과 함께 사용하여 아이콘의 크기를 늘리거나 줄일 수 있습니다. 다음 예에서는 크기를 6 em으로 정의했습니다.

<html>
   <head>
      <link rel="stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
      i.mysize {font-size: 6em;}
      </style>
   </head>
 
   <body>
      <i class="glyphicon glyphicon-tree-deciduous mysize"></i>
   </body>
</html>

다음과 같은 출력이 생성됩니다.

색상 정의

CSS를 사용하여 아이콘의 색상을 정의 할 수 있습니다. 다음 예제 예제는 트리 아이콘의 색상을 변경하는 방법을 보여줍니다.

<html>
   <head>
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
      i.mysize {font-size: 6em; color: blue;}
      </style>
   </head>
 
   <body>
      <i class="glyphicon glyphicon-tree-deciduous mysize"></i>
   </body>
</html>

다음 출력을 생성합니다-

이 장에서는 Bootstrap Glyphicons (구성 요소)의 사용법을 설명합니다. 그것을 가정custom 아래에 주어진 예에서와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<html>
   <head>
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      
      <i.custom {font-size: 2em; color: blue;}>
   </head>
	
   <body>
      <i class = "glyphicon glyphicon-tree-deciduous custom"></i>
   </body>
	
</html>

다음 표에는 부트 스트랩 글 리피 콘 (구성 요소)의 사용법과 결과가 포함되어 있습니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	결과
<i class = "glyphicon glyphicon-asterisk custom"> </ i>
<i class = "glyphicon glyphicon-plus custom"> </ i>
<i class = "glyphicon glyphicon-euro custom"> </ i>
<i class = "glyphicon glyphicon-minus custom"> </ i>
<i class = "glyphicon glyphicon-cloud custom"> </ i>
<i class = "glyphicon glyphicon-envelope custom"> </ i>
<i class = "glyphicon glyphicon-pencil custom"> </ i>
<i class = "glyphicon glyphicon-glass custom"> </ i>
<i class = "glyphicon glyphicon-music custom"> </ i>
<i class = "glyphicon glyphicon-search custom"> </ i>
<i class = "glyphicon glyphicon-heart custom"> </ i>
<i class = "glyphicon glyphicon-star custom"> </ i>
<i class = "glyphicon glyphicon-star-empty custom"> </ i>
<i class = "glyphicon glyphicon-user custom"> </ i>
<i class = "glyphicon glyphicon-film custom"> </ i>
<i class = "glyphicon glyphicon-th-large custom"> </ i>
<i class = "glyphicon glyphicon-th custom"> </ i>
<i class = "glyphicon glyphicon-th-list custom"> </ i>
<i class = "glyphicon glyphicon-ok custom"> </ i>
<i class = "glyphicon glyphicon-remove custom"> </ i>
<i class = "glyphicon glyphicon-zoom-in custom"> </ i>
<i class = "glyphicon glyphicon-zoom-out custom"> </ i>
<i class = "glyphicon glyphicon-off custom"> </ i>
<i class = "glyphicon glyphicon-signal custom"> </ i>
<i class = "glyphicon glyphicon-cog custom"> </ i>
<i class = "glyphicon glyphicon-trash custom"> </ i>
<i class = "glyphicon glyphicon-home custom"> </ i>
<i class = "glyphicon glyphicon-file custom"> </ i>
<i class = "glyphicon glyphicon-time custom"> </ i>
<i class = "glyphicon glyphicon-road custom"> </ i>
<i class = "glyphicon glyphicon-download-alt custom"> </ i>
<i class = "glyphicon glyphicon-download custom"> </ i>
<i class = "glyphicon glyphicon-upload custom"> </ i>
<i class = "glyphicon glyphicon-inbox custom"> </ i>
<i class = "glyphicon glyphicon-play-circle custom"> </ i>
<i class = "glyphicon glyphicon-repeat custom"> </ i>
<i class = "glyphicon glyphicon-refresh custom"> </ i>
<i class = "glyphicon glyphicon-list-alt custom"> </ i>
<i class = "glyphicon glyphicon-lock custom"> </ i>
<i class = "glyphicon glyphicon-flag custom"> </ i>
<i class = "glyphicon glyphicon-headphones custom"> </ i>
<i class = "glyphicon glyphicon-volume-off custom"> </ i>
<i class = "glyphicon glyphicon-volume-down custom"> </ i>
<i class = "glyphicon glyphicon-volume-up custom"> </ i>
<i class = "glyphicon glyphicon-qrcode custom"> </ i>
<i class = "glyphicon glyphicon-barcode custom"> </ i>
<i class = "glyphicon glyphicon-tag custom"> </ i>
<i class = "glyphicon glyphicon-tags custom"> </ i>
<i class = "glyphicon glyphicon-book custom"> </ i>
<i class = "glyphicon glyphicon-bookmark custom"> </ i>
<i class = "glyphicon glyphicon-print custom"> </ i>
<i class = "glyphicon glyphicon-camera custom"> </ i>
<i class = "glyphicon glyphicon-font custom"> </ i>
<i class = "glyphicon glyphicon-bold custom"> </ i>
<i class = "glyphicon glyphicon-italic custom"> </ i>
<i class = "glyphicon glyphicon-text-height custom"> </ i>
<i class = "glyphicon glyphicon-text-width custom"> </ i>
<i class = "glyphicon glyphicon-align-left custom"> </ i>
<i class = "glyphicon glyphicon-align-center custom"> </ i>
<i class = "glyphicon glyphicon-align-right custom"> </ i>
<i class = "glyphicon glyphicon-align-justify custom"> </ i>
<i class = "glyphicon glyphicon-list custom"> </ i>
<i class = "glyphicon glyphicon-indent-left custom"> </ i>
<i class = "glyphicon glyphicon-indent-right custom"> </ i>
<i class = "glyphicon glyphicon-facetime-video custom"> </ i>
<i class = "glyphicon glyphicon-picture custom"> </ i>
<i class = "glyphicon glyphicon-map-marker custom"> </ i>
<i class = "glyphicon glyphicon-adjust custom"> </ i>
<i class = "glyphicon glyphicon-tint custom"> </ i>
<i class = "glyphicon glyphicon-edit custom"> </ i>
<i class = "glyphicon glyphicon-share custom"> </ i>
<i class = "glyphicon glyphicon-check custom"> </ i>
<i class = "glyphicon glyphicon-move custom"> </ i>
<i class = "glyphicon glyphicon-step-backward custom"> </ i>
<i class = "glyphicon glyphicon-fast-backward custom"> </ i>
<i class = "glyphicon glyphicon-backward custom"> </ i>
<i class = "glyphicon glyphicon-play custom"> </ i>
<i class = "glyphicon glyphicon-pause custom"> </ i>
<i class = "glyphicon glyphicon-stop custom"> </ i>
<i class = "glyphicon glyphicon-forward custom"> </ i>
<i class = "glyphicon glyphicon-fast-forward custom"> </ i>
<i class = "glyphicon glyphicon-step-forward custom"> </ i>
<i class = "glyphicon glyphicon-eject custom"> </ i>
<i class = "glyphicon glyphicon-chevron-left custom"> </ i>
<i class = "glyphicon glyphicon-chevron-right custom"> </ i>
<i class = "glyphicon glyphicon-plus-sign custom"> </ i>
<i class = "glyphicon glyphicon-minus-sign custom"> </ i>
<i class = "glyphicon glyphicon-remove-sign custom"> </ i>
<i class = "glyphicon glyphicon-ok-sign custom"> </ i>
<i class = "glyphicon glyphicon-question-sign custom"> </ i>
<i class = "glyphicon glyphicon-info-sign custom"> </ i>
<i class = "glyphicon glyphicon-screenshot custom"> </ i>
<i class = "glyphicon glyphicon-remove-circle custom"> </ i>
<i class = "glyphicon glyphicon-ok-circle custom"> </ i>
<i class = "glyphicon glyphicon-ban-circle custom"> </ i>
<i class = "glyphicon glyphicon-arrow-left custom"> </ i>
<i class = "glyphicon glyphicon-arrow-right custom"> </ i>
<i class = "glyphicon glyphicon-arrow-up custom"> </ i>
<i class = "glyphicon glyphicon-arrow-down custom"> </ i>
<i class = "glyphicon glyphicon-share-alt custom"> </ i>
<i class = "glyphicon glyphicon-resize-full custom"> </ i>
<i class = "glyphicon glyphicon-resize-small custom"> </ i>
<i class = "glyphicon glyphicon-exclamation-sign custom"> </ i>
<i class = "glyphicon glyphicon-gift custom"> </ i>
<i class = "glyphicon glyphicon-leaf custom"> </ i>
<i class = "glyphicon glyphicon-fire custom"> </ i>
<i class = "glyphicon glyphicon-eye-open custom"> </ i>
<i class = "glyphicon glyphicon-eye-close custom"> </ i>
<i class = "glyphicon glyphicon-warning-sign custom"> </ i>
<i class = "glyphicon glyphicon-plane custom"> </ i>
<i class = "glyphicon glyphicon-calendar custom"> </ i>
<i class="glyphicon glyphicon-random custom"></i>
<i class="glyphicon glyphicon-comment custom"></i>
<i class="glyphicon glyphicon-magnet custom"></i>
<i class="glyphicon glyphicon-chevron-up custom"></i>
<i class="glyphicon glyphicon-chevron-down custom"></i>
<i class="glyphicon glyphicon-retweet custom"></i>
<i class="glyphicon glyphicon-shopping-cart custom"></i>
<i class="glyphicon glyphicon-folder-close custom"></i>
<i class="glyphicon glyphicon-folder-open custom"></i>
<i class="glyphicon glyphicon-resize-vertical custom"></i>
<i class="glyphicon glyphicon-resize-horizontal custom"></i>
<i class="glyphicon glyphicon-hdd custom"></i>
<i class="glyphicon glyphicon-bullhorn custom"></i>
<i class="glyphicon glyphicon-bell custom"></i>
<i class="glyphicon glyphicon-certificate custom"></i>
<i class="glyphicon glyphicon-thumbs-up custom"></i>
<i class="glyphicon glyphicon-thumbs-down custom"></i>
<i class="glyphicon glyphicon-hand-right custom"></i>
<i class="glyphicon glyphicon-hand-left custom"></i>
<i class="glyphicon glyphicon-hand-up custom"></i>
<i class="glyphicon glyphicon-hand-down custom"></i>
<i class="glyphicon glyphicon-circle-arrow-right custom"></i>
<i class="glyphicon glyphicon-circle-arrow-left custom"></i>
<i class="glyphicon glyphicon-circle-arrow-up custom"></i>
<i class="glyphicon glyphicon-circle-arrow-down custom"></i>
<i class="glyphicon glyphicon-globe custom"></i>
<i class="glyphicon glyphicon-wrench custom"></i>
<i class="glyphicon glyphicon-tasks custom"></i>
<i class="glyphicon glyphicon-filter custom"></i>
<i class="glyphicon glyphicon-briefcase custom"></i>
<i class="glyphicon glyphicon-fullscreen custom"></i>
<i class="glyphicon glyphicon-dashboard custom"></i>
<i class="glyphicon glyphicon-paperclip custom"></i>
<i class="glyphicon glyphicon-heart-empty custom"></i>
<i class="glyphicon glyphicon-link custom"></i>
<i class="glyphicon glyphicon-phone custom"></i>
<i class="glyphicon glyphicon-pushpin custom"></i>
<i class="glyphicon glyphicon-usd custom"></i>
<i class="glyphicon glyphicon-gbp custom"></i>
<i class="glyphicon glyphicon-sort custom"></i>
<i class="glyphicon glyphicon-sort-by-alphabet custom"></i>
<i class="glyphicon glyphicon-sort-by-alphabet-alt custom"></i>
<i class="glyphicon glyphicon-sort-by-order custom"></i>
<i class="glyphicon glyphicon-sort-by-order-alt custom"></i>
<i class="glyphicon glyphicon-sort-by-attributes custom"></i>
<i class="glyphicon glyphicon-sort-by-attributes-alt custom"></i>
<i class="glyphicon glyphicon-unchecked custom"></i>
<i class="glyphicon glyphicon-expand custom"></i>
<i class="glyphicon glyphicon-collapse-down custom"></i>
<i class="glyphicon glyphicon-collapse-up custom"></i>
<i class="glyphicon glyphicon-log-in custom"></i>
<i class="glyphicon glyphicon-flash custom"></i>
<i class="glyphicon glyphicon-log-out custom"></i>
<i class="glyphicon glyphicon-new-window custom"></i>
<i class="glyphicon glyphicon-record custom"></i>
<i class="glyphicon glyphicon-save custom"></i>
<i class="glyphicon glyphicon-open custom"></i>
<i class="glyphicon glyphicon-saved custom"></i>
<i class="glyphicon glyphicon-import custom"></i>
<i class="glyphicon glyphicon-export custom"></i>
<i class="glyphicon glyphicon-send custom"></i>
<i class="glyphicon glyphicon-floppy-disk custom"></i>
<i class="glyphicon glyphicon-floppy-saved custom"></i>
<i class="glyphicon glyphicon-floppy-remove custom"></i>
<i class="glyphicon glyphicon-floppy-save custom"></i>
<i class="glyphicon glyphicon-floppy-open custom"></i>
<i class="glyphicon glyphicon-credit-card custom"></i>
<i class="glyphicon glyphicon-transfer custom"></i>
<i class="glyphicon glyphicon-cutlery custom"></i>
<i class="glyphicon glyphicon-header custom"></i>
<i class="glyphicon glyphicon-compressed custom"></i>
<i class="glyphicon glyphicon-earphone custom"></i>
<i class="glyphicon glyphicon-phone custom"></i>
<i class="glyphicon glyphicon-tower custom"></i>
<i class="glyphicon glyphicon-stats custom"></i>
<i class="glyphicon glyphicon-sd-video custom"></i>
<i class="glyphicon glyphicon-hd-video custom"></i>
<i class="glyphicon glyphicon-subtitles custom"></i>
<i class="glyphicon glyphicon-sound-stereo custom"></i>
<i class="glyphicon glyphicon-sound-dolby custom"></i>
<i class="glyphicon glyphicon-sound-5-1 custom"></i>
<i class="glyphicon glyphicon-sound-6-1 custom"></i>
<i class="glyphicon glyphicon-sound-7-1 custom"></i>
<i class="glyphicon glyphicon-copyright-mark custom"></i>
<i class="glyphicon glyphicon-registration-mark custom"></i>
<i class="glyphicon glyphicon-cloud-download custom"></i>
<i class="glyphicon glyphicon-cloud-upload custom"></i>
<i class="glyphicon glyphicon-tree-conifer custom"></i>
<i class="glyphicon glyphicon-tree-deciduous custom"></i>