材质-地图图标

本章介绍了 Google 的（Material）地图图标的用法。假设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 的（Material）地图图标的用法和结果。将上述程序的 <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">directions_bus</i> 路线巴士
<i class="material-icons custom">directions_car</i> 路线_汽车
<i class="material-icons custom">directions_railway</i> 方向_铁路
<i class="material-icons custom">directions_run</i> 方向_运行
<i class="material-icons custom">directions_subway</i> 路线_地铁
<i class="material-icons custom">directions_transit</i> 路线_交通
<i class="material-icons custom">directions_walk</i> 路线_步行
<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> 图层清除
<i class="material-icons custom">local_activity</i> 本地活动
<i class="material-icons custom">local_airport</i> 本地机场
<i class="material-icons custom">local_atm</i> 本地atm
<i class="material-icons custom">local_bar</i> 本地酒吧
<i class="material-icons custom">local_cafe</i> 本地咖啡馆
<i class="material-icons custom">local_car_wash</i> 本地洗车场
<i class="material-icons custom">local_convenience_store</i> 本地便利店
<i class="material-icons custom">local_dining</i> 当地餐饮
<i class="material-icons custom">local_drink</i> 本地饮料
<i class="material-icons custom">local_florist</i> 本地花店
<i class="material-icons custom">local_gas_station</i> 本地加油站
<i class="material-icons custom">local_grocery_store</i> 本地杂货店
<i class="material-icons custom">local_hospital</i> 当地医院
<i class="material-icons custom">local_hotel</i> 本地酒店
<i class="material-icons custom">local_laundry_service</i> 本地洗衣服务
<i class="material-icons custom">local_library</i> 本地库
<i class="material-icons custom">local_mall</i> 本地商城
<i class="material-icons custom">本地电影</i> 本地电影
<i class="material-icons custom">local_offer</i> 本地报价
<i class="material-icons custom">本地停车</i> 本地停车场
<i class="material-icons custom">local_pharmacy</i> 本地药房
<i class="material-icons custom">local_phone</i> 本地电话
<i class="material-icons custom">local_pizza</i> 本地披萨
<i class="material-icons custom">local_play</i> 本地播放
<i class="material-icons custom">local_post_office</i> 本地邮局
<i class="material-icons custom">local_printshop</i> 本地打印店
<i class="material-icons custom">local_see</i> 本地查看
<i class="material-icons custom">local_shipping</i> 本地运输
<i class="material-icons custom">local_taxi</i> 本地出租车
<i class="material-icons custom">地图</i> 地图
<i class="material-icons custom">my_location</i> 我的位置
<i class="material-icons custom">导航</i> 导航
<i class="material-icons custom">person_pin</i> 人物图钉
<i class="material-icons custom">pin_drop</i> 针落
<i class="material-icons custom">地点</i> 地方
<i class="material-icons custom">rate_review</i> 评分_评论
<i class="material-icons custom">restaurant_menu</i> 餐厅菜单
<i class="material-icons custom">卫星</i> 卫星
<i class="material-icons custom">store_mall_directory</i> 商店_商城_目录
<i class="material-icons custom">流量</i> 交通
<i class="material-icons custom">地形</i> 地形