Materiał - ikony map

W tym rozdziale wyjaśniono użycie ikon Google (Material) Maps. Zakładać, żecustom to nazwa klasy CSS, w której zdefiniowaliśmy rozmiar i kolor, jak pokazano w przykładzie podanym poniżej.

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

Poniższa tabela zawiera wykorzystanie i wyniki ikon Google (Material) Maps. Zastąp tag <body> powyższego programu kodem podanym w tabeli, aby uzyskać odpowiednie wyniki -

Stosowanie Wynik
<i class = "material-icons custom"> tutaj </i> byłem tu
<i class = "material-icons custom"> wskazówki </i> kierunkach
<i class = "material-icons custom"> directions_bike </i> kierunki_bike
<i class = "material-icons custom"> directions_boat </i> direction_boat
<i class = "material-icons custom"> directions_bus </i> kierunki_ autobusu
<i class = "material-icons custom"> directions_car </i> directions_car
<i class = "material-icons custom"> directions_railway </i> directions_railway
<i class = "material-icons custom"> directions_run </i> directions_run
<i class = "material-icons custom"> directions_subway </i> wskazówki_subway
<i class = "material-icons custom"> directions_transit </i> kierunki_transit
<i class = "material-icons custom"> directions_walk </i> direction_walk
<i class = "material-icons custom"> lot </i> lot
<i class = "material-icons custom"> hotel </i> hotel
<i class = "material-icons custom"> warstwy </i> warstwy
<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_dining </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"> lokalny_sklep_sklepowy </i> lokalny_sklep_spożywczy
<i class = "material-icons custom"> local_hospital </i> lokalny szpital
<i class = "material-icons custom"> local_hotel </i> local_hotel
<i class = "material-icons custom"> local_laundry_service </i> usługa_lokalna_ pralnia
<i class = "material-icons custom"> local_library </i> lokalna biblioteka
<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> oferta_lokalna
<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> 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"> mapa </i> mapa
<i class = "material-icons custom"> my_location </i> Moja lokacja
<i class = "material-icons custom"> nawigacja </i> nawigacja
<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"> miejsce </i> miejsce
<i class = "material-icons custom"> rate_review </i> rate_review
<i class = "material-icons custom"> restaurant_menu </i> Menu restauracji
<i class = "material-icons custom"> satelita </i> satelita
<i class = "material-icons custom"> store_mall_directory </i> store_mall_directory
<i class = "material-icons custom"> ruch </i> ruch drogowy
<i class = "material-icons custom"> teren </i> teren