Materiale - Icone delle mappe
Questo capitolo spiega l'utilizzo delle icone delle mappe (materiali) di Google. Assumilocustom è il nome della classe CSS in cui abbiamo definito la dimensione e il colore, come mostrato nell'esempio riportato di seguito.
<!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>La tabella seguente contiene l'utilizzo e i risultati delle icone delle mappe (materiali) di Google. Sostituisci il tag <body> del programma precedente con il codice indicato nella tabella per ottenere i rispettivi output -
| Utilizzo | Risultato |
|---|---|
| <i class = "material-icons custom"> beenhere </i> | stato qui |
| <i class = "material-icons custom"> indicazioni </i> | indicazioni |
| <i class = "material-icons custom"> Directions_bike </i> | indicazioni_bici |
| <i class = "material-icons custom"> Directions_boat </i> | direction_boat |
| <i class = "material-icons custom"> Directions_bus </i> | direction_bus |
| <i class = "material-icons custom"> Directions_car </i> | indicazioni_auto |
| <i class = "material-icons custom"> Directions_railway </i> | direction_railway |
| <i class = "material-icons custom"> Directions_run </i> | direction_run |
| <i class = "material-icons custom"> Directions_subway </i> | direction_subway |
| <i class = "material-icons custom"> Directions_transit </i> | direction_transit |
| <i class = "material-icons custom"> Directions_walk </i> | direction_walk |
| <i class = "material-icons custom"> volo </i> | volo |
| <i class = "material-icons custom"> hotel </i> | Hotel |
| <i class = "material-icons custom"> livelli </i> | strati |
| <i class = "material-icons custom"> layers_clear </i> | layers_clear |
| <i class = "material-icons custom"> local_activity </i> | attività_locale |
| <i class = "material-icons custom"> local_airport </i> | aeroporto_locale |
| <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"> locale_dining </i> | pranzo_locale |
| <i class = "material-icons custom"> local_drink </i> | local_drink |
| <i class = "material-icons custom"> local_florist </i> | fiorista_locale |
| <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> | ospedale_locale |
| <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> | biblioteca locale |
| <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"> offerta_locale </i> | offerta_locale |
| <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> | telefono_locale |
| <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"> mappa </i> | carta geografica |
| <i class = "material-icons custom"> my_location </i> | la mia posizione |
| <i class = "material-icons custom"> navigazione </i> | navigazione |
| <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"> luogo </i> | posto |
| <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> | satellitare |
| <i class = "material-icons custom"> store_mall_directory </i> | store_mall_directory |
| <i class = "material-icons custom"> traffic </i> | traffico |
| <i class = "material-icons custom"> terreno </i> | terreno |