재질-지도 아이콘

이 장에서는 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>	지역