Matériel - Icônes de cartes

Ce chapitre explique l'utilisation des icônes (Material) Maps de Google. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.

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

Le tableau suivant contient l'utilisation et les résultats des icônes Google Maps (Material). Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -

Usage Résultat
<i class = "material-icons custom"> été ici </i> été ici
<i class = "material-icons custom"> directions </i> directions
<i class = "material-icons custom"> directions_bike </i> directions_bike
<i class = "material-icons custom"> directions_boat </i> directions_bateau
<i class = "material-icons custom"> directions_bus </i> directions_bus
<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> directions_subway
<i class = "material-icons custom"> directions_transit </i> directions_transit
<i class = "material-icons custom"> directions_walk </i> directions_walk
<i class = "material-icons custom"> vol </i> vol
<i class = "material-icons custom"> hôtel </i> Hôtel
<i class = "material-icons custom"> calques </i> couches
<i class = "material-icons custom"> layer_clear </i> couches_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> boisson_locale
<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> hôpital local
<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"> bibliothèque_locale </i> bibliothèque 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"> 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> 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"> carte </i> carte
<i class = "material-icons custom"> mon_emplacement </i> ma position
<i class = "material-icons custom"> navigation </i> la navigation
<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"> lieu </i> endroit
<i class = "material-icons custom"> rate_review </i> rate_review
<i class = "material-icons custom"> restaurant_menu </i> Le menu du restaurant
<i class = "material-icons custom"> satellite </i> Satellite
<i class = "material-icons custom"> store_mall_directory </i> store_mall_directory
<i class = "material-icons custom"> trafic </i> trafic
<i class = "material-icons custom"> terrain </i> terrain