Malzeme - Harita Simgeleri

Bu bölüm, Google'ın (Material) Maps simgelerinin kullanımını açıklamaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

<!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>

Aşağıdaki tablo, Google'ın (Materyal) Haritalar simgelerinin kullanımını ve sonuçlarını içerir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<i class = "material-icons custom"> buradaydı </i>	buradaydı
<i class = "material-icons custom"> yönler </i>	talimatlar
<i class = "material-icons custom"> yol tarifi_bike </i>	yol tarifi
<i class = "material-icons custom"> direction_boat </i>	direction_boat
<i class = "material-icons custom"> yol tarifi_bus </i>	yol tarifi_bus
<i class = "material-icons custom"> yol tarifi_araba </i>	direction_car
<i class = "material-icons custom"> direction_railway </i>	direction_railway
<i class = "material-icons custom"> direction_run </i>	direction_run
<i class = "material-icons custom"> yol tarifi_metrosu </i>	metro_yol tarifi
<i class = "material-icons custom"> direction_transit </i>	direction_transit
<i class = "material-icons custom"> direction_walk </i>	direction_walk
<i class = "material-icons custom"> uçuş </i>	uçuş
<i class = "material-icons custom"> otel </i>	otel
<i class = "material-icons custom"> katmanlar </i>	katmanlar
<i class = "material-icons custom"> layer_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_yeme </i>	local_dining
<i class = "material-icons custom"> local_drink </i>	local_drink
<i class = "material-icons custom"> local_florist </i>	local_florist
<i class = "material-icons custom"> local_gas_station </i>	local_gas_station
<i class = "material-icons custom"> local_grocery_store </i>	local_grocery_store
<i class = "material-icons custom"> local_hospital </i>	yerel hastane
<i class = "material-icons custom"> local_hotel </i>	local_hotel
<i class = "material-icons custom"> local_laundry_service </i>	local_laundry_service
<i class = "material-icons custom"> local_library </i>	yerel kütüphane
<i class = "material-icons custom"> local_mall </i>	local_mall
<i class = "material-icons custom"> local_filmler </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>	local_pharmacy
<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>	Yerel posta ofisi
<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"> harita </i>	harita
<i class = "material-icons custom"> konumum </i>	benim konumum
<i class = "material-icons custom"> gezinme </i>	navigasyon
<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"> yer </i>	yer
<i class = "material-icons custom"> rate_review </i>	Oran incelemesi
<i class = "material-icons custom"> restaurant_menu </i>	restoran menüsü
<i class = "material-icons custom"> uydu </i>	uydu
<i class = "material-icons custom"> store_mall_directory </i>	store_mall_directory
<i class = "material-icons custom"> trafik </i>	trafik
<i class = "material-icons custom"> arazi </i>	arazi