재질-지도 아이콘

이 장에서는 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"> directions_subway </ 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"> local_dining </ 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"> 지역 병원 </ 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"> 현지 _ 배송 </ i> local_shipping
<i class = "material-icons custom"> 지역 _ 택시 </ i> local_taxi
<i class = "material-icons custom">지도 </ i> 지도
<i class = "material-icons custom"> 내 _ 위치 </ i> 내 위치
<i class = "material-icons custom"> 탐색 </ i> 항해
<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"> 장소 </ i> 장소
<i class = "material-icons custom"> rate_review </ i> rate_review
<i class = "material-icons custom"> 레스토랑 _ 메뉴 </ i> restaurant_menu
<i class = "material-icons custom"> 위성 </ i> 위성
<i class = "material-icons custom"> store_mall_directory </ i> store_mall_directory
<i class = "material-icons custom"> 트래픽 </ i> 교통
<i class = "material-icons custom"> 지형 </ i> 지역